{"_id":"@material/mwc-top-app-bar","_rev":"718-05163deb9a358da9dfa8220040b7d829","name":"@material/mwc-top-app-bar","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.6.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.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/mwc-base":"^0.6.0","@material/top-app-bar":"^1.0.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-top-app-bar@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-L/QVq7YanwCuwK4R3FepHwiKdfoPlb9HtwHvaSenUBdCoBeNq3SIxJ0y3n6hEJoCdVcwHxDkJTQoocJCN92zgw==","shasum":"06347d2144eb31bc954f8e0ee69a0bbe05b4dc34","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.6.0.tgz","fileCount":15,"unpackedSize":303028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAjCRA9TVsSAnZWagAAbskQAJTlcr7Ku7poT3lNOmtQ\nFHY1DRutxpvPAk1w6Mq/G5bezCDGk70YkAVz38evlMUPYVfjePo1EloVQKX6\nCw4kPXsNJ08POIeKCqo4zWjrPvg95cwOLbrYZD/TxPpRTIgKZFXkSLuG5YmU\nSRXWIWN7jYWXO/A+vjlEkaxOHU4xYDwTcs9uMBhWS18fZSIRQttwmz68KIza\ntC6ORqzduCgltjtGHrz/XPjXvuS7u+TWxYcWMnDfTvRrjKEpdlTkp5APIUIR\n9Vhmon20rDTfcHal4/bzX90B4C27lE+c7BSFWYCbKjZqVeb+BSXz0fx6V4Is\nGQsbsIuelL/W/VSR3ZNrROQvNTX18QTdBIikCz7uixlumTTWN0/+wni+ASd7\nBZsi8emjSXUNpdorl59ARCpq04OWxvnUYMjHh4tU7TPfCkuqYHiaPdVmwC8Y\nGmsutKS3RRuM3ioR48uHsHpwj+AYcFSgLH6KRtgV4cRBYjIW2GjB0HmmRXft\ni/DmEBfpyIHAsvTQl5YJazY0nPY48tHCth3eDd95T1GuAxPQtf1IE6eSrtSN\nuvKYTGK4WHfWcUSiNqBh8PEXUpgGcMQBMncV0wPkYv1hxImFAej2EKBmqbRN\nMGR0iup0NZ6Uhg+SkA/wmBv5HTbySRFGZcrb1U56CQmnOGdmvvlmMA2GOW92\n+u/L\r\n=CyPo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdwVUqc1MQfHYWspmIBMvowZABkcxRODgHMwjTk1fpuAiEA9X6X14fQiLklQQew4MjGIEmgBpdcxQLEfaQOgXVD8oY="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-top-app-bar_0.6.0_1559773218855_0.9899897445769787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-top-app-bar","version":"0.7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/top-app-bar":"^3.0.0"},"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-top-app-bar@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-wo8s2OfnXy3KCw7PIvIzAgJwytL0t7Ta253BWxYqedE88AHOuw4UU4apg1Elsokx0JUmiBg0e1cCL3+82bqiKQ==","shasum":"eb88ab74714f7d79067867cd4658081a3947d578","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.7.0.tgz","fileCount":20,"unpackedSize":79991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9hCRA9TVsSAnZWagAAcAYQAJ9KINVJHQhKInIY+meu\nwx/3SLvr/YKFjy6C7Z0f2bh/yJ8OPw1EevMDPbcUo75eqJuJfV0twRT+Oil/\nfDUq9TR7fZdCzV9UJ8zL712ziLmmLR7F6lf6kdupFGB1ZthQeUjYW+o9EIn5\n4ceHIFk+PCZsU9Df1pCT7yR4YbG6vnNIuVIGFQeWNb9CLZ7nZB+VUU7Wr85L\nzZQZY5JatrsgM/bkhyp0g8MLjoRHquQ96cz6FKJdB93PEEyRocuKet7zXBYM\nLpfS2JRDiBs6NW5XVYBeUcOBf/mz/OsZZuSbp2yjMqg7mGMqtjYSijkY4DPo\n3WdN008fE/aMusibgR3fChZezd1gDGClr3flkqKjje41I4mUQDOOLNSklu4N\n9k+Bb8NqLb1peUrqyb8bXjfZSfpiSzpimZfqeFOBZF+r33T8ZfKPY01pjZdv\nwTgzEkL3b1gMur2Xk2HZ9XXPz7WxAxbK13mD5g6ykSyKCa7wk9sztFOzlYe6\nNwQ/Iyk0Y+SxzwzOqVuzgCsc1AkK/nkQ0Nzf6J/LQDMF5jahfr+/HQQuzRkn\nMczLFdcnjH33rF12iEDGBjG4ylYWQy9H7+cK0ssPs4HO2hUlut7ie7qKClL0\nf9uLTwkgbpuFrPfuYcOBeiZlXCzbh0C17H01qzU75g4UF+9hcUPtRDf+dxAb\nsCZ6\r\n=mge0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLFUe1GQw7f+ZYDkFW+h++hBnX1wwPrwICGgse9AJR6QIhAPeK18RqftKlJ541OKMyi/rm9O8+A14lJZJjcazqPTqZ"}]},"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-top-app-bar_0.7.0_1566941025102_0.9281650312857284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-top-app-bar","version":"0.7.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/top-app-bar":"^3.0.0"},"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-top-app-bar@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-uZaC0y15boP7Ws73avZvFPvj4JUkn5wlfN4sjwlf+ogbChxY3TgKMpjXacuJDDFQzN7NV9yEosLSMH2rYiNeCQ==","shasum":"37b26887d5b9f804f5fced355f407525c148651d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.7.1.tgz","fileCount":20,"unpackedSize":79898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezfCRA9TVsSAnZWagAAwrsP/0LV7hElKABwEOzcCUix\nq2oy+4sCf7dfhtMejfi48e6cSugkeUvMJAKHenxEsddTy/PraS2UMbnB4+ai\n9iuVNuO0gfWLUrCdvO38R3lEPIxRJPrkD3QAcwG5Fw+ky0WcxbLGoW5ChQEx\nVqNFMei7W1ximDYG5p/ymE8cG/2xwAMDX4NzHtUOfwqVS2KvWocM8/WNBR34\nmuRUmpgTDiPpXlQ9nieN1qXMeSIHBe2mtTiYm5pGpA/PSVgd2lvPUVWVEWMI\n4nd4y9vP78l5SiOh23kr08o4bp8IFTWL2y5URUX9AApwws1V6bobiH1oBHZZ\nSXYWTLsutm4tdLvO8qFlLLUUf1hawPxZ6dKnwZZaNCN2Ac7kZ5VDWP+EEFRx\nui96EDjHpI8TlP8768u3m0qd4temSy/qIqxArsIapAGSQF4OYw5YGjKFWTgN\nibPc3yfNqxbun/im2fGHYg+CXiZuFCxEkAhWAzvS1EpZHRYR0Fbd7Y4RtrLO\nPrP5LrcQnuiXE/AmAloXXTSCO2/GeYEuBW75lhEoVznzkAG0eVw+vurHzYmV\nmJfXTJ4JKR4daPDuNK77O8XJDq7Oxx6c7s8MWaj/RGNI8RnEqyCNLybuZlXa\nINmaGiFhHYaz32vt0PBLvGfZC3YrZg/avNZfCGYkGhwI+nlfaNuxx5kJ0cGS\n59Qz\r\n=+AEl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnauJrds2h4C8LyHuHTfLufdZrdd+4VfQIuf6XbnSVpAIhAKtuNYFDB5x89uBfzjKAPTe0xqTBoIKXv/spbdiuZgfW"}]},"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-top-app-bar_0.7.1_1566960863367_0.3762774256870596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-top-app-bar","version":"0.8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.8.0","@material/top-app-bar":"^3.0.0","tslib":"^1.10.0"},"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-top-app-bar@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-td2C7zhm0RYr2N+Et9MLaD9gcKzycPM34hD+JT00k1C4nObU21byjgKUhxhqOuLrS6QD6hxE3ppcgNJu7UhNnQ==","shasum":"7cabe44d4f9d16486333d2f886e38145df09d7ca","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.8.0.tgz","fileCount":20,"unpackedSize":78441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+cCRA9TVsSAnZWagAAU7kP/jZw0166jqeC45iwGIDA\nqIC0CigIeLa4nDxC0fWAGmgEYCEMsTFUU5oPjEk5Gx/wiIz92hJm4gH5+XKC\nMf36crLA/4dWzn40CLjYFTSaN30Z/IIaVdxCg6zsqgtee9Hz8ux3xXsfCTUM\nXyFk06UAzU79ZYwBtxc4NZv0uZzHl4AUy27Qb5lYJtPTbqagFIDgW2tCCH6K\nzRFq9mHIMtrp97/NJLz5zuVaPjNJBx06Ux55jyarn+xFOIFxKuQdGMDMwGoW\nGt+XaDptbCRd2EV7LYH/u48y2L9MRoobD2dwS2zB7+XoLhuCYMBelMbgP2S1\nAPJIzdA+Riim1dXeKUyRa7xsssicehJeru+r7Vh40kkKxSLcgBiV18zWc39+\nUQXoOVndgWAHRfdbxT8cxUT2epNvq3M25EaoGjKwc1f/1DS6f+NEoDaRkj7B\nEokjl7dFZAVVKZX6IAr8CZMIDCMnBsHTEuxTsBrc0DVdJw1Si8iE5+Yyfh9T\nxxeEMkw0ZNYbex4gG5TNItSTECHx6wRFKIr1zambJAGVdEDh34Z6nyRrz5R5\nSUAL66vHmnOJZmmu+zm+umd8AkvI15HlH71mLmhoAvKf/zEXF7CtLpIvJlvM\n+s+ugQuGPfPwdoDZAl7bUqFWFkWonD4bGntgn6JbKUN55b/M5YkFYKRB4Q5b\nUQmh\r\n=r1cM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFM6g460f40QZ45TjGkD7809EivPP5THsE4dN/ToIojNAiBsswcjuCN5nFzd2A0uoMWvzBCpmkhWdL27jirOvbIbkA=="}]},"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-top-app-bar_0.8.0_1567555483742_0.9727611805487177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-top-app-bar","version":"0.9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.0","@material/top-app-bar":"^3.0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-63uKGcOOSJpijzoxSGLDdQ6j1XmdnxUGDeyPbAj6PhY54aw21C/lbCGGBaa5IiXcgnwJcQT7Wj6sFrcVRs+wpg==","shasum":"7ada5539042e379ae430e3e62fb14145f52697e9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.9.0.tgz","fileCount":20,"unpackedSize":79051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWePCRA9TVsSAnZWagAAtIMP/Rn/xi5YmQIrOCouNVFs\nPxTdLfcN2BqyNH9PbIGsfycguVlCA1+MRtTlP10Z6E4OlJDZxxqBZfUPAk3l\nyA9gH7EaTQDnsHHayWDwTDHuVupbOjczbskTS4/ckA4ARhAcGExmkF+1L8Sf\nYjomwEzfTQbjGvc/2jkff9kqSx7U4+7jYdvx7pAmUXGPi/dxDkfVPoI2J/Ak\njAktYTzWGmN4+8Uq1RH/cVbYetqjjkxddd4bT+h9kzMeP8GS/Db+/mvyX1Tz\nMSOadZAtbWPpumCEcImzNRANAI59+WCXeZs9AuFQJ3DKfy9tizFAT2Fvo3aY\nCZYPoxMguPbAIx6LoQgPtn8vI0yMgLPk8dgD0LkH2r503Lrm2Yg1BnpWZHu5\npygH3OsbV1wqmTjpqagLum8RptMgxWJDBj4uuibTFkxztP/RkBZTbz0eF8Fd\nn0dBvnntrTE+w7vChacmzC/njgTj1CJvYxA9cZHSlJZsp6X3I8zwUOHbNqtC\nwcociTO5nnmb5SChd/5zK/l5Fd6fymiAaTcpYtRwfurMladtb83+50dlzjzW\nNqVDca45hIryphf4vrWMOnMovksnf+GNBL4Yw9mMt/FwXYiRihENqiyhFOTp\n8K5qTQt6/e+DvbmaM5f/5+nn4tXpH302gZmzfHqtX9VB/u9i7/WAF/CcbpgZ\nDV6k\r\n=+tO7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHuIaVPHdktlWCqazvOKwtJkl6NTJLBLDHlrn4B4dApgAiEAhoFKfYYrq2BCEXEaccWYln+gVKezdoYXAkaeLXwZKXs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-top-app-bar_0.9.0_1569548175237_0.283123596109891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-top-app-bar","version":"0.9.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.1","@material/top-app-bar":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-Gd6LL3IKoY5/cKA8aEcnrgftRbrvxEUKOZ04EROKrMdaVBMrC61RQMLxER55ghIq3EICN72YqASgoZ1Ut/QNyQ==","shasum":"7df7a63529b33bfc06ed4d867eb0af7f41651632","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.9.1.tgz","fileCount":20,"unpackedSize":79035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm38CRA9TVsSAnZWagAAbOwP/idN6F0i2g7iOK0bzoSq\nw2arUrMlYxQRmWf1q6h6c2DZaDurlNVPbN6NoUj+Gvn45wPBPBLa6fVMkc3p\nPyS90oeYLwB1ow1o1bjhUjIaqEnHxTc+fRaWgTVNC3Po3cS4y+FbkVqvixt8\nNLGA6el3g7u7HoEqu0mTJ6YaisH658agPxgY/YZv+r1NxqVSGe3QCHl3Hmuu\nOs/ziL22Xo2cRLSIWdD71p0OXOYMj6r/p4eQLipADPJi8ALXqYpHQNQUDU+V\nmQ8L3d3sI/oPjKsfqwbVYEB4UoARfp6m8yk2exNytf+qXeLXIlpFcsuXJdeY\nqK90PNzrk1OxO1u/nfsjsYQUGUhuoWPCdndMj0mc/EGjEbVjSmUbzd4Lq+m4\n99KUMEsS8BitHF+s41DAtyLT1vObil5YI1csoWmNLfLZrvaFDRWRBoA149tl\nltNt+hiET88QqxnBGupGjTd0URRhxYH8zA63mNkAog7aPvmwW/Sts9ol6oiT\nFvUt7OpVgqhoK1DMt97+jjiicuw9Z1slAWMTM7VlIktrgfbhi0lvvvmJ2Scx\nRMNT4PBxEZhiWPwUe3HgQBCvJaoTVZFHwz7jpEHdwKZB18xssNpjMOdK42bY\nog60U9l/Tiy7ct8PmbwJiTuFPYRhwmF+FTKdUd98Uea6gxEb1uFyP/3EtEnQ\ndozo\r\n=BAMn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDCQNLf04czNlHeuVgsK3AMn/VgmO3DyIKIS9sK6WRPCAiBLoYfa6SPymhi4s45BO7oVDtFCPvffLOvEehjdPr1OTA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-top-app-bar_0.9.1_1569877499858_0.0061150959845706065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-top-app-bar","version":"0.10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.10.0","@material/top-app-bar":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-lTiMQ7iAAtGu69SUTR6Io2y0FDFiYt/ZSUcY3xIbLP2v8qsMD123ksFOVordSPa40tEY7l0INXcyesikqD6sPg==","shasum":"6884d9affc8a0e3a2701a573f86758e104e9775a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.10.0.tgz","fileCount":20,"unpackedSize":79164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRATCRA9TVsSAnZWagAAbHgQAJGQ7+aAolYtFehyp3pH\nHq/qyiXO/KnhB1PxdmA9kcKfpULa1vyZgUlYk581VsMQ9Ff1Dzw4dT1SubK2\ngBYbbW9FEREhPs4tgyHCIYKiz1RCG1QLQcx2Qhz0I00GMMgJoGcXKZBh8S3i\n3NKidPAyomF3je7X9ItV+xfkbcdHs9W0fWCCYk2dBMie6OQHqgCt7E2N7gVI\npI4QGdnHtGcOyEeWm5QywQ+1Oj7nynMnXVG8GhDIgad9XqnL6YJ9Imp57Bqg\nwCSB9YoHNL6xQ6qmADWXiKnZ8IWfB9oqm6DVxtPRALmbBRHDfu5SYoxPYKtc\nwUeYSzNaFDXTC4Qd1i5MqY4o8v85C8qkTwhpCiIAbz4ZvPeoe3k4I0fzZP2q\nHapfqQH9G9QHQUulQst4vwrGCa9y8ZYbJiBhbjWdMYUrFC+t3J+YSBTSfHMl\nN9Xa5IVT2Vo2JgmpW7uC8ekxLEWpw6uqNAYC83l9rI2v2H6amW9lc1DCmvQA\nSk3H7dPdRGJhy9tPpfHbDpMP1ce/+do+P8lv5rZtaWQu/xv4DuFt39xg+5Wi\neqf4YMvtV8o8ZDQMUVJAIQd44qeBfLGjUcqyr/084OQeyL0OYSTe4QdEg1wx\nfp+KezhN68aJxiJwOhSu8xvxigHP1QZSyAxKziPydAtHrsW6+r32uxiQ5gjx\nbQ4L\r\n=479A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF7GVUOaPtGFwcwjApf64kSDbf+4q0zVFwpYZOTLqD2dAiEAkHJtakowJx9lwYJ9G1uCGiDyajfhq0kKJ+M5qemhk1k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-top-app-bar_0.10.0_1570836498698_0.3698672630005375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.0","@material/top-app-bar":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-cRbFRPmewWO68/Rp9bNTKitkRqqKIK11pXsmrszldM9uoFkWGyRDhUSTvUwE/MCoEnwxzyePWCqO1YFBz+OkSw==","shasum":"e98b71cdbdc77d63202c24f326ba798411a5ecf4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.11.0.tgz","fileCount":20,"unpackedSize":79164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3nCRA9TVsSAnZWagAA8RMP/31HYMiNaj3QJ0qVUn9Z\nlODTecgZtlB//eoUsPtud+ZfVdss/ezerWdxGlV/3mt8/a1WkFOkZ51UTcAh\nw8OwDBk0Y7s75Ot090jnee6zMNMyzPpsfJGS5R5e4AOLBH66TV3R0ap19xpW\nJDjGxW8BpO6FCrlNsij9DcpTv1LZMI+59h0xO/pUTTY3bRne+ny1qhmwv2sS\nUMIRdv+6E97f06gWmvSW109T/zEpGSYMSjiKPSOotK+No9SCmIx6yw7EOePl\ntrR+jhMFUMf2gR+Ratsfcj3tEfbg/V9L+pI3dezXdtkPQFcXf4sVY3tzeyZr\n4B6fOw85yEN9d4tVbYkJEgfALCfLfFPos5p55hF4EKzufp2xtxXTsI6sOyjG\nkMqf+EMO0C94zb3SbZQpoBPo93GBI8afhcfQleQRphdkBX2eKBiuBDITd/Ji\n2EeFoE/znSDuhUuvzRUl3S79c7mrZmjot49sRRZZcXcUtUXJEDJu3HM84fFO\nyCj1S1rk6u74tn7xtOl62nqL3NePIEI2c8gD81VkxHL+Hv89jzjf/X/SvLDt\nUlPCi4jUHp0td1J4QmWpR7bxsqazXGxWwc5N1tvPm+ZsgEFM6vCsyAI9fu1Y\n/CgtrRIRZjDTy0M61aGU5cx7EnlyZvNLsJJ1hPp9hy3N/bUk4p76ibmMyx4H\nwT+p\r\n=rOWx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHbPg1C9UpZpbaeFdXYmOWAZI1H6HvkqZge3v5YFs4mAiEAyoF7ElQQq+//dY9+VnTQmVCcRS+dgxAWl3Qgx7z5aMY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-top-app-bar_0.11.0_1574804966934_0.9117566256074405"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.1","@material/top-app-bar":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-oqSU5JfHdX69KhT9Up/lxE1rAKRMrUubh2+mMp9nsGypQ38N39cVvEuBXuxQCGJMEgc4h9btwOwI0LDrgzO7/g==","shasum":"38cf17ec53ecb06d3b1bd0c28ff88b89e49fbf2d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.11.1.tgz","fileCount":20,"unpackedSize":79164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cK9CRA9TVsSAnZWagAAkCwP/1lowQLlC/myXPyELvAM\nW4YX0+hexf8EWFeQjJ30ItCWMtBPzeIABf7SkwZKO75lnERHPqgWdGc6ohJO\ng6u2YdnswSOIWN9oCJxPbrKvpnhRDA3ttb7VI+Z5+JVHWwt98G/QnhR3J187\nu4bpv86BQVDHxKxzD8rWkA6B+FLSel9/QNYzGODItc0L1aGK3s6cHUvmUkRz\n3hJRWs14PyEOx4xuD2swFfogiakD8C4I2ehVSrmPUluk1FmuHtrykIX4EUIF\njipzuM1oJ8dBf8xg8RvnXbO/iFfPBTXXIxJpTbiRgDpWjm3bv99/c4HD2cqf\ntkbaAOabQUfMokCuxJzTnNEZNG9sBLREg99Yhsaf+aE9tDPwIUKY4bJZcs+l\nZQm0YtaPkq6ZPCubUIcGepmpR8VuxGKtihLNDHdqfpvkDSzWXBtQirDy5WGJ\nnuiDRE5zukqLVfnoWqS3u6tnLp2cL8IVwUDsJbSUaAB5JEem+eSLy28cyQ3g\nhQ7TEqXtp/dA0ZqVQcS3uXEhexbY8pWd0ZyBZ44L1wI4kBN/eOaTby4NAqCX\nVVNELG3JQoYZKzjWb20ndO5MhQqj6Y7ATuE2dfrrXQyCgKKDVPHLMiFysg2a\n4kZlqsdA/XzbvW7qfsOZB1938psIeVpQbDXu62/miMBA5k1INZu0mAGSt2z8\nrECL\r\n=UfVM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDb2m1UNap5mUiUJSieq3SBc0LQJCU4SBt11GZ2DueT1AiEAjEXl0oMWMP0JLna7KFshc9sHvHCysOx1bJlg2DMk4ZY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-top-app-bar_0.11.1_1574814390026_0.9264296646208634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.12.0","@material/top-app-bar":"=5.0.0-canary.1c494e567.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-SqwjRjxiopXu6HMImt1bVg3IMxxkdDAogYGEKCqQ4ZjxP99tqWUL2dCorjMyp0OtYOCGCJa5b5bG+MTxWAcQFg==","shasum":"0a5962c326b248842554364546e84ab904ab439c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.12.0.tgz","fileCount":20,"unpackedSize":78375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkqCRA9TVsSAnZWagAAdfAQAJ7cUk1VP3I/Gt/QG57M\n3hdSExa45HeT3SRoyBaW1v+cCWh61OSSReXYxYgqa9f7CZ7L/oWCXJpHozuZ\nyUZwngycDMB9wkBcm70bD1kByYr5MaFHDqEEzMRPn8VSLuuW0gNv1UXTvQ+w\n0BAhrxFi8HOxyIbLjkd7/DB6ZIAcQiykzIpuLJQw84cfeONzxmjk2E+0HCob\naUGYcWqs1vYbYt9iim7qO/A809SG2Yd3Rq0dR84L29U5M45gMXov9btpJ9wU\nfAZ1/coQS3KOFg6m+M9RSOtNs4SPW25z+j/DBRV8zVvXwGalQfzWc9fLjFnh\nUI8eIXmDEBo31K2MbsJ1DQBFOfUQvfMl13598YcTbdLxQRZsCdH83pkoVDZi\nbEqj8CBItG2X9MrTDlShIqWrewqj2f64yoD7W0OXOy3coIphAwdm0H1xhn1G\nqfvaT+A+7Cw8saYBsZgmz33c7CH9DDFaB5rvxm+IL8svKQuI7/iklQtpiLtW\nFkfjaSAQuA6cmHkoIPQLOEdPdMOlfpb4XWUEsx9n4RDmooKTG+l9z9MHIaa/\nDMDmlKLf/IZ4ggp7WojLZ8hCwjYv/HcZ+AVApcqozvGMRijZ/tWZ2CFRh3eK\nHNWy6w/VWx7CQbfUVuyrks5lCerTRT0RVTPG+CbeyOW+fVGrvEuRwtuBVvQK\nK8it\r\n=IY2G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgJGmOZTOZWlMh9CbdNeEhHUgBxLRz+LDQxdMiaHOwHAIgcH8fYfeHrz3Ys6fwhrTJprR0OaXg/oKw/rnRCTpLNc8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.12.0_1576626473963_0.7544483669786504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.13.0","@material/top-app-bar":"=5.0.0-canary.a1a0deb3e.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-SEMN91Ymj058n5tCJ0aybfnA7AHouSk04j2An/0kQwhO4gW6Sl9diua/vtzVzs+keofQCwpvAFdSO+offIlc/w==","shasum":"19cd1470a8ed3c798296319063ef73697e53a816","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.13.0.tgz","fileCount":20,"unpackedSize":79288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPcsCRA9TVsSAnZWagAAGTAP/3T8xsQ4PEPYnERrsM54\nufM1oYugSfvUJCTcuBo3uCjZit1upx6m++bPZF39PUihje6Y/746oioMIPn+\nkUdeoG1wJbbSwgrk+i2Kh3MztibRdXvLFJuu1o9AHl5Q/okMhbwQt08bdqnY\n9l1TWxq2bEXPSErwqFnBLejHeP+CkvfJBUyZ9YHgAev04mBcthLW16JkXAgJ\nBDqVekU/0py2HrL3rwDdwbX1uz3FTgc8+52ZEePLO2hhJ/DVK+KLLAUpqF5k\nlJ+ezoMFK0I2lX/dY58QPYT7CJleNvq0G5z5+JDEc/RUQ/a9eMewxfXpPk3l\n1QugyUjeGDuuzSFvEn+I9nZe8EA2Tj+y0SS6LLsuIGf7i+NNXztrrAZtYnM3\nK7bCuCYvjM9TUkCi68S1irCOC0GIHCg3wTQ7LlIGEcX9btoPPr4A7H3Grx80\nDXGDEEg1Qtfz1draqpMSz0HynHNGjCJDSohG8bsI9url/CP8PCpTsRlxwYJL\nn3GVuyRB2t23Xe1+oiPHDiT/BRBZeVVn8vaNrzBdyz+wKGshPWyy3i5C072b\nSEjbKSUPnxYSm2dvauZLnjHK1aOM++2i6hA7VnujyxyB7u6XYH7XPq5K1knR\n1atFuHzeonwpxRWI+zk9TzKttjDKU9I34WONh6wFF9by3EFVZPN1ESbU8BmT\nN0X/\r\n=3RNo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUvxTm5jpxe8kT8LhBw7+dFktX/9r9XhpWldbqoJIyDAiEA5VYgyu0zDbho/9tmYGWseGeYMW8DASQiFHlmZ63BhTA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.13.0_1580791596393_0.5011712209107044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f790f713.0","@material/top-app-bar":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FYvij6uT/baLbVxOgqJ3dWAZBxZ5XmX1sPjzpKRtGQcutMariHVgl8H+igYl+Kx5AYmBcgX0cD0zvJt9/KUeDw==","shasum":"e71443c78fed3c751542680d977d197e5dcc87c5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.f790f713.0.tgz","fileCount":20,"unpackedSize":81842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrACRA9TVsSAnZWagAAwiwP/0dNAg8hLF4MqewkPpgs\nbnbnSorzWN0AwGpMfJkAUSOpb8/BU9UFN9RnjvpbjQAl1vhXASNFCbtn2HTy\noLoT4jLsUBjplZkTFRV6+CU3zJiOa8Q+4das009fI16BwGdfOf3qOrJdJ8Mf\nv3EwlP1PBPEF6Aviw4/8i7dlG3nCYB+wOe6I1Tdp7Legf5gHIbboqbCxObWX\nNibLrh6q5JKa/mXlO3CKJIMqlelU5QngcCT9s0+9qqveWTrECgx1k5YCzIMS\nQf1FqEF3zIBLW3pmwcsVq+IJxvkNh2CtsB9TgXjCHKdJNmL1dNCTdsBaCPFS\nSJ+FCf0bS1IPLAONtwifMWKfw7l7PXedZmZLrwFnN2+TBpRDKNoOVWDZlnFO\n7h27JqNZ60P3zOf2D28vObTyooNdD/kPNxSB69eCNr9WsBsXXqIM8ypnL17J\nl3cDtMRgLBObgrzIILHgLmrUbQ8YRs68RbzoGlAm7ODfMv7mejPVqBsBUABe\nXZk80LUqqQW5RT9WuihoY0OLHWMkzYsv7I0CK7qs4xC1M+rndPjS1JXiQH7j\ngfl1qc5+5BKm5sjKR5vD5ga52/8Mv3dThm0t5BrTwKxi5rD9oiXS+OeCrDO5\nVjgm/0qT7ZrTB6kXThYwKmW3SDGVsRRdO95v6ZiaOhednG+KcK2jlQDQkK84\n99Zg\r\n=+Dwq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWrNzyYUmIlapHuiDEVjM3v1OyAvMx1on5tKzJlNnVyQIgFsT1PeKF+Mo6ZlEQm3gggkEtZqdKJCSnEvaLM/hhbcM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.f790f713.0_1582856896019_0.6977828063346783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pdDVqw7dWbJR/uvBVWwTmoN9PYtLP5uxOusu+Dth77hZbng7/AK6IEY9A35PMRDpmDqQjeAcADYQUJHhnzUXWw==","shasum":"28a2ff9f919225fc92b37325c62359b70815a0d5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.c759cfbc.0.tgz","fileCount":20,"unpackedSize":81842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqkCRA9TVsSAnZWagAAun8QAJ6MjAo9lDaqcMoukvPm\nPDy1kKi2VlAcuCqwPyOONjHIVYHyzTly6IfMl7A/LK51XgCt473/tCykmXCX\nhGe6+RQbJWoFB4Q+TCeL7Hk2Qt/+W2MTAq+BhxXcuaXPEpD2tgCG5P9XBevw\nL1FZWQS12WhSZa/UnITNXJqEvG6JskoMG+jlnW7qDesTOxiACOVccO2v5D1H\nxUU0IYhgYw3zsYv8nDitYrRICs0PKMavE7xZ7FBMVnEZCwW4kTGPnnzgrBXC\nBH8/ttHfN4+FNDIY6sfn175n6pHc6GU/vLpR/j8sV3FNjxfGSfebsjaciQDE\nowCrdhnHgprfj/w6Y/vhjirWGEfMW3MX1VsIdel2InYmcEfLzDcyrdCWf1UM\nLach4sH1Qe3XQRWS7oG9JQ06ti2TAxUmwCyEWqc4ySh5OamYfFzL55HGBmZk\nqvlEbauzOQZI8j/eQC4tc0bp4cGuH9pIHqFsMIhUam2nkSx0eFaCfcvEk2RG\nLxjtg1ie02AUv1WTz02cniReUHfEzuaZCpFDQkMz1/u0yhsE1vuoRQpleCgA\nBrjB42CeJNnAk+IKJXu6QSQUgI7QCZ0XIIPAOCXHHT1VVQfrOXhWu2kvH2Bc\nfAljjSpksLraAqliO9RZorL6+0Fmk6FVzs4Fo2awK+XzrgEp30d6K0ClatHy\nWeCc\r\n=G0Ax\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDOkPac7odmJwIpnYZsHb8EdF9oO46gy57vBB7CqDJBAiAJV17U30M/yMj5k79tqJLVcefJbDt8/VdobJJ/OUdYsg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.c759cfbc.0_1582934692181_0.5543025673117523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aX2E+x3asuVKnDReE67/kIRFJGME7OK/UVzAxRDDjmGc90iyrqKT/4U+9jfCh4ZbiKkbmrCNVuKid7f5HZWSxw==","shasum":"13af3a6ec471cdbbc7be51e50ff24886b9329117","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.97ef53d8.0.tgz","fileCount":20,"unpackedSize":81842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3NCRA9TVsSAnZWagAANjcQAJrh6DTeTlvUc7+krDsM\nyhTsi9EbJ/nzwrhEk0GJzYrMf/skPe+GWypXD08lhdkTjWvaCRLGluHpC1QV\nfZGZR+sqUq43m6twCovRHivgQYQ+mrXIPUyNN1TVEQevxJbQ0tGfqejoIZy7\nVjtROpIW/iO7iG+3kKN1gwL1rFR8i2UycviKB4Ld2+f2OP4mJRKW7V2zbx+I\nXpS3te1bN+vKuS7gpuVHMRf+os1m6jScN20AcFvNzJum7eEj6CYq+e7yIA8U\nbBMBmwRgUQEK/1otwPF29TC8PKolYjgSOzfq9Wvt44FPfbrOm85+NyNH6k9c\noLrAR/YaUeWH93eDWVtrN5QAZ0wNPqxD0a8+ZKtCTSdHVhX09SmCfhPPfCxU\nxjpk07BufZt+STpCHi1ll6q2oJhV9V4gv+6sE5jzgb9eFhyzhMmHiXpUH8k6\nChALPcOz2jO4Rs0h2OY+cy4cgW+tW9w1DT3adTEZqkhQxPSPNTDxXpm6c93s\nhLPr+BiJfiRNwqxcMfa8Vf5Jx0npy+hXhhBacyrkURhgxDsahttLYytWi46K\nEKhff5KfxA9hbF1htbrJ7yaRAkzVDUsU8SP7jQz5rt+OX7JNaVXGXxKij2PY\nMQc5lzaGgIbQ1Q+be2djMXR2vCxQNsAjpv+k6czvOAEEfP2WC1JbgR+p5/nz\nr+Ev\r\n=xRL1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIyrApEZrMlufHvYnN/MfjCEUeIYp7bLahMzYJ/YJ17AiAW0+aFUyrEtug1Agg2IIQq6Rdj+n9dNGDFXppLwHOWRw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.97ef53d8.0_1582935501395_0.5041898196758914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Yub14N0WJMgdFPMTNFu/hbgJjPfEKe61OEUmp0MMcHqwX8jUHTDXVTDePii0/Mdk3ghVN3KUoYU4nwJqscR88Q==","shasum":"bc47b9b3ac2cd915039b8eee6539ceadb8b6cff6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.24f5fa6e.0.tgz","fileCount":20,"unpackedSize":81842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmcCRA9TVsSAnZWagAA81cP/1jvk7F/ple09Bn/d68G\nAmrzwZr4Pu+pi+cJH5Atjmtvzbey7vLj7nT4ZiVD6i14wgnwdwwNEMN6u442\nYSzQHee8ms0TEH1Yi21GUF4c3FhZoOElFeIvh5UOMi3NZr4wbYNGzQtFcjOf\n/5Tug4tbIdL0bcsxgTnm/C8nYZsnRoIP8f/WBSxQbB+dXtJJ8XWItZMedH33\nrqcGM/cOYjTQ6QfDmc6lu5qGFyJs1Y6F500e7e8k/zsLakQ3vKvWLeyjAk8H\nUDGXOHTxqat9IGPmvDOoofodyGt3wQylDIBKzONxWOHsjt9GURy03m4CrNo4\nvS/LiMKsd8kAhCJ2QxJPqRx/xoT6kU5i47NyvOA+/2OKaU/Oh5QLYpysI/gJ\nFdHRiHNjUMq0uAdB0oWU0nYr+Z5DT/gs+zKELjfxDM103U9DVqQtWRPQ+Qcq\nrrkE4sCCH2byUPGwvhu/oA8eL9W752xOFO3cLZVycWg5M/HOMWnpPMVV2sKi\ncgfeF2kbb7WRGJtHunJwMu/Q08V8H1SuGzFW6LLmayI7GlVDaaQgxbHHhvgw\n4s8YgTp4+E0PRIRxXTVVSvci8nDgOuvGvwdcYiQW63hR+hmu7Jn2Pqmfnxp+\nhXmy8jcDB5MH5PyXdh8OyBEGaGCf1D6gANmY7+lyfHmSqpvLsGIijekpFbBQ\nApt5\r\n=d4De\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTe65W07KVB/W1D0a9w+aXCPSpfqy/nl3/ZwBc8gcljAiEAqtSN9PkqPEng50Z8MKWwizHHGJ6JSplzV2I/pII9wh4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.24f5fa6e.0_1582938523637_0.5890647575476231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.960e214f.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tfYAlWCHzaK+pqLVtajMVouAYVLd/FdLgB8xGqsiALBPlZhjTWJGV+bwe64lXQyv187fEORIJTsfOYiu8Q/CHg==","shasum":"fb93a0dc6938cc8be6838b7b7b0b5f26dcab0887","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.960e214f.0.tgz","fileCount":20,"unpackedSize":81875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXSCRA9TVsSAnZWagAAK8oP/0W9LRBHJ1/9rm16oJRX\n3SXAFc0cgel6mykWMhvq0OtBwBUEg/5Wy+oqRoEfXvx18fbGfpTA4G32mxKV\ntaGmFD+r0nbHxlr5MshLMM+u4Hqqlwg2sHeomb7bFX1FiW4y0NRqSSv4ihvd\naIxrAjbnqPvUgcAwr15Mbm9Rf24HLom+Zz+k7GwaU9elBgh7FH3RVr1mQzaO\n8fGoRY1nng0P5LSp1IYWf4NCp4uy/P3qMgfPXzBN1sqGrrsh9TT/FowOLR9v\nA8T6m8mp+05p7kq3QXjmOUT+QjrjaGYqglRNElZV6fEJpHNWGXYtJ+7VLo4P\nPKPB7PlA5uV+2VRoEv86H47WJfPOJeg3ISeLlGRKP9pnquW/r5C6o3A/jgNt\n2LhUkYJOpJSQJlQK8xKmKUbcK9Mv9RB/1rTXSFf6NwId4tC9Td6IgyQffERd\ntUcCWS276ghDxt+S4kl+AzWk8D8HuPcMPIHdBdda4RG+UGwyUWUsMgHB6Dwm\nlGATBgdqqtSphlA6lDUAjxFhRad5xGQrQdi71UiLQ5Nn/ow9XxDKADRxjpGT\nxBhIkf+CG+LO4c0ngNAbUreRgADPMoNrdWKtMmw6PmMbxVgzk7aHFcsCsa57\nWGVBi+H/9hLgZSZrdgJKm0KR/wKTacrjWd3bPQZOt8Yh+2ADnRHCxVBXsfcW\ntRMJ\r\n=1ATw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQktv76TAbGgtyWKBaRtLkZ/uxRbyvmg4Inrgu7qzV2wIgDVK/x8oPXs4h+XDdnX4d7L1VW03k7wW5Qo7ea0ytwvw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.960e214f.0_1582945745704_0.38314759808282517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LeMg/YbjhSdon2+yJlc8CX+Qkd/+eW3hpO6ckL0jcoq+9vpOOCzsmJ8YAok0kVV8NLJR0voXFUKwVVRAIjxCgg==","shasum":"480cc2b92f3dce8471ef5cb4bbb8cc5f93cad9b7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.a2f046f5.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatHCRA9TVsSAnZWagAAynQP/j1ECWy7wYKZgmTbcPds\nN/RvMNZVpER3qxJ7sORAcV6QNiz/NdeU4cyktFWRRIM34eRbA1juA1ytDnRd\nLSvuZCm++SVITWuypLHCZAiDdsJwOm2Tm9uH4s+W8H2kEK63ugwAJ/nXiaM+\nDwWjK/3HlHQldqAt1CzZrtdqB+0rSUgHlFn4ye0ZfdEtN0+v84STpp3lmXpZ\nm/7Fc1Tz3V+jf97yMAeiFxg7LlWSvLV1R43ScbxQ9FBgGhYrm99EWk9cNA5l\nmSQYOnTHfQA6mvKVZwmVqg0mz43YngYMubxo5Egj7CU9HHFEueVrW7kRQl7X\nxw+FqofC9FAqvX0cOLuAdlUSjJrjWc3kX+69AKcwsCV0EgoXrMQ8lbUTYr0w\n8yv05AwVXjv07nPV0yvbnmrLCrdMvX0x1ReC3VJh9027QfSllASpNQp2a8/K\nbrVeMAUiUfqoSgmdRWt0oQS5i6QuGuYcjFBODhSVaVe0UL7y6dQc4Hv9chBG\nWyqUPjl3LRKu63yXf0DKXzsjy9HjocqqSCniaphj5dUvxG/vjCH80OarT4vv\nIqPF+qvlRSvoe97Yh5v3WrL8T83KZKMkx0OSdo4OH10+wiqZFDitz3EPL96a\nsrZvJ1SDOd4Bx5CwoLi7lBmkWONOaoAKc42hHivGz8R4/UDQJ54VtLddffzX\n8AGT\r\n=f4qW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2qcedU1ETvrRW6hRXwW/MRFFkk2RJLaUXl/OPYKTKdAiEA0oG302ntx31JnmSXAz0UxvWgZwivSzB6hUDn6+eyiac="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.a2f046f5.0_1583196998895_0.6912785803318653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.024f371a.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-yr/hV+YQSHCwAyrCmAAaVpw1wbMQjQKI47M88maGe6zqecvQpm7WBgtaI1quRHAojaQzSLJ3uNclpUJXd2DM5g==","shasum":"e988a07ff9a7da3ec4ab11d3d90158c56de47c98","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.024f371a.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLVCRA9TVsSAnZWagAA7JsP+weLo5Eq7ekHHMiy4PwL\nC5+dIi4Hn11oU2IpnVwCnnnl50NKGGg1ebzmD+W26xttTayFkpK1UaVuI933\n6GJ4nts7iyy9AZQsaYvCgyksFJU+pvZbFEmkqcxn8uHs7grw7lr1UUZ204+g\nUR4U63cbW7c4PS4IXYtjkDjBUGP1ShbEYmCZ5N4zru5m6F425fN4d8XEKKcA\nf71O+hSdS4wwC6dlZQn89SkS3LXWD4ysN60jk25EanZ7WtuifMTACOBvgmJV\nYbdZQadUwhZIVJbVRFn80uaCPDck+vFZOS0+dTJxMknKIABvHf6RqhwTSiat\nae8JFs4zJC9Qwy5u6SYTiFYzfmM6VE+Wln8DFKfEuUuPWvgF0940AL0P3NKl\nAfonLDa5tIbodZjG6K51H1lcBYgibRw/nlpmoXi1zP49+dipmNT+OWurPOW5\nWmOr6/YjPeqAokX3/u2iLm8Q14uhMR0J2l8Jbexze4hEZ51C5r5fqjivzgjG\niWT+ygeNdn+bg1cszckXLLnDNa6pfYW4DYLoDckQwc+LTH6fQci/OWZnsfdi\nX/OljskUfXDhFe0hqI9V/Wdyz4HcmtRgJ/Jx/MCKYMsjMEZkHVLrlBUKo24W\nlnEUlQmNQyencyGKjKHygVvmW5/RhsAWZcNSCTO0sjReqpn0GLNN++zIc0eD\nWXsD\r\n=/6fH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGJweuTamPbCmCxmRHD78hlqRXPvZdRI3oJTYGLIdSgAiA93gJshbYtYZ/MG9SXg82N4LX1KcgnGmGnO+pDrJnOAg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.024f371a.0_1583198932760_0.8360391557239009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2f164110.0","@material/top-app-bar":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hL6kkILVCjM6s8Le9e26PG6/Nr+Wyg6RG1zyI3wtqHrWyUbsVBh8XJYx61ZHLD3GLxraetcWaFJsXDjIGGkfAw==","shasum":"2dec7d134825f336a88679e5c821b80fc27dba14","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.2f164110.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs09CRA9TVsSAnZWagAAZgUQAKGbjMNhY4EZGiFgQB0+\nD3g2IxPME9aKHeKmHn0SjnrD26xnYUZmD3Dc+aJvRchRK9mg3S9ThiDIgnak\nS2528V6x+nIa0na//20UvFK1tOy2u9zFK11nwLVce+N0rRbRzTDa4wbrj+hQ\nZGslNqM+NNxFFSIVaigdKoDC/scyIrXBJHT8bSvGu5ZeKGrkh5jXFFLQ8ET9\nCgr0ivyPeRjJk/oBKZ1F/pxsvwhZsrIqJMcyu0P6gCl3HyBRq39z+zgV4sOo\nWtHIVPS0V8+gMV2zLkkTQ3axdEWLWhQpYjT8V3xkvmATgmgxfEHf22Hz6ZQ6\nEF2bAwH3VPlYW3q4gyVvlrwFB6Z0uRiyIgX0eZg3NSRNL3tFaMS/sAzdZWo9\nG62fKVFOSHfM+qjh3VewbedXEA6kSO4zX23H28bdta/0Yr7pxAJeUqYD8svH\n+ijCf4ZNKUrY+6HZxv7ya8PJQk25/OOEdwlEglxaqJGX+ZhjjEPSml95g40y\niewHH3AuPvpvGTrD3LTQtQj4qO6psdslVXvtGzDCTmfZNWIbfgKNEl4gxDhB\n/9kc2cM2V14HcMYKfWO6Qw6yZjxAUtQs3SY8ICI+l+P//32/l2FcWMPFhqCO\nYzAJgavwV+Iv81fOszVbs2J30uY8Oq/JL3TUTi4PQaTwkielLKTyvGbPXFTK\nwQJj\r\n=dJ0D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6Au7mwPzP43jVzbZVwOunA5pd7JtMRpecw+/Zpt1giAiEA1Gh9ssY61V7411BZyaM1Mxq0atrGCp9eV8Yo0I/AHds="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.2f164110.0_1583271229327_0.7100401289844838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/top-app-bar":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lrcgoQjecmkpkEhzJSOSI8DAoFZ+lMM2kYKUqHufSp1Xv8d5fob886Y78eWbiq2aHBiRuei2pW2buTCmZpoTmg==","shasum":"92e5fe62c69af4b642fd4fcf1528832254728a2b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.edd465cd.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIFCRA9TVsSAnZWagAAckgP/A5F1du1KbiGYNgQW6Fu\nOgqjSVOjaot7xnIvr0CFdHWS03bQmeH9DlEz5htrQKU9cJ1dTNj7zL8M7QPf\nbahOUMAgIKhig3KsWa4JQpO2ar6Hg83wIeLJfTByS2EthXWnXiyG/xSVxd2n\nOCAZKbMrvRALinoTw/x5Sb+tP6wIVdSCrXW4qOxclEfDpKW6S/sDun41kzZU\nMkaL6yJuRR3AoV4zy9KI3bR1yOW/CaeAe8y55FPOmoPzucFteqNElUWhrXYT\n2sIWFusbKLkMzE/eSnwaBa+A8lOPz94x048Gw7L+CZiamrznvu7V8ZmWB3Nk\nc3Rts5O53UjVmWqmzMz+8ua69uljpkIE566W/szpuI2jBZQuJoz1LZc3o1CM\nbMvdihZKOK4JtDlvJuD+Jtwr7kdOv7sel/9tGorNhmcYhyKVGKA/3CTFriJU\n5mfGmcyeYboJSR/ZQrDqPhH9ly0f9TNH9K56JQmwuyqBwXaUst3ndgS2a/ow\notodv8P0MEBCzYpzHWO8cY6Roc1+kGWwcZB7PH9se1oo8/8HlUkI/B/tPd41\nwi3HmUfGA10aGGS8WJCKH28W7vupWlz1iaFGpF7GnOrzPOpZtYQJYBrdQw2n\nXHlju79P1bEmO3FLU46nmgZwIjuiGGjHv/lH7GXsVVRCXJ0NgHpzHglR0VCJ\nWspb\r\n=M7F9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPcqco+dn/+QTH3Yh0LS9WnnieiVCl3p6LA+lBx+vBYgIgf/ONinbpy6yFk2f8oNrfnD6XTSVbPyWf4lpf9Unqep0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.edd465cd.0_1583280644558_0.28896560335517374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/top-app-bar":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8OZTdLDEJej5M0kEUBraQ8yTwMMCbCTNXKwkKQ2AevmS8ooePMUwIlt/TLnmm8oqJx6NSUIql9w60Dg+qtbNMw==","shasum":"0731041dd5cfd43bfe36c4a3d935120fdbf42774","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.2b02d017.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA0/CRA9TVsSAnZWagAAhpUP+QG38A82hukgCcLbBcv/\nXMW6Und2ucg4dQizyx4JYUIXMQzBENnrtjYZRFg1+uIDcH5zPsJoHLSi/Wu+\n+XxGWlbQGcGqAK8e5N1Gf4XluBq1SqSCU5wtfXZtUknpu/90xGDAImXuYAuw\nsB75QqYMMxoMtdzkaLdfArFcofQnZfrj+UNLlSoKVP1q3kHyGAwILjxiStCO\nDvIxKqEyVwEYa3FQfp9V5sDaZ6yENGkFd4wCjUKy2uFGTcPPMPKww6brvOvC\n/KNAQ1AmA//sJSLxMMfRvX0pea3zgobYW2VTEjYF4K7q+r/tt+XyS9kpsEJL\n6YiG75N72fJLxtgIkLiwOKqSaaJBISofiSVGFY8QDT2cUA8s/FOetPhvpL/Q\nPDoGSLMgoeoUt7NGa+j4mT/Y8VZJD+OF3dK013IylYGXCZXcWY32TprAwJYQ\nBOV2jDzToqxHHRqudFqJWJA66qbPFD0I/6pXk3UxZNOudP9n8yGzDpuQEb1C\n2JFi3d1Okz3rL1MsF+MHxCmh5b2nKW5dc3ddrSAlNSJdfGlK0HwnJebk2j25\nmOy2ikKt6BbKC1OpjjlY4KLo8EUL3WIcR2fiVnzIyGSwMsT10jMGnB6Zq9qs\nrFgeiK71wTj1xe4PrEOA3lQTZWGsain55jyQBgOmKKNAhHApR8hNY9o8Xyl/\nlros\r\n=R5ng\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqmnILUidr1+ZDKTxQCF+QYO7w5vo+54wCfSCDbMPZmwIgYsdF4Mla0ZpKJGG6OrAW5b57RmuzcqqekyFU1nSq8uM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.2b02d017.0_1583353151575_0.08411487805947626"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/top-app-bar":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NGvHFLTExeBT/SNkrO5u/EXBOgHe/IJx+VNu/9QA7YfrqTnlVdPEIdXOkumI7irIAOpTHUdQiJ5Jl81JmmGNhA==","shasum":"76092e2f80f882e42606625b3b3c921c6a061e51","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.cbdfe453.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFDCRA9TVsSAnZWagAA0agP/0PaNyu82pFY3IQQD0rO\nl4GBgH6xfZ18I0IltfLCfe8G7NbULn8GgWtvprLjypec/cJzmi3IHdCT0hUD\nJwYLPlv27+l46QL2o3MWG8hrUKjc20n1xGcH+vZccrjJ9A+EY3o166JlGe1q\nGl2vtczNH38eqz7VRepa+sL34QsVGeWeJkmFmK/zlFPGPrf6qHtGApbKtWGO\n+xLOjgEW0Uwexy+xCb9P44KaEks2rQhqh0kiJajez5yoj01qQIQC5ILZwzOv\nLlYOHRP3rcUbFck7knr5WtbExzWhZs84ZivnMjkhAlsF1oKwB05P2Q6S5BAt\nTRYIwgVzz9S9K45p9PnL7+GB6hegA3X/EGiWxjNUycBm0sbfr6q7tpQExn69\n4NFWpcwdYnXoNDNYDFN92O+bct/IQgdQZap8qLOoJTlxlHWjy3Wjs2NJnk14\nHMDcJ+5kXeYZqoHDjTLkfQwDhIUJHScbw3AyUlzwTBPEuQ+Iz3Mc68sRjfbx\nkkVNGm+hWDVfLofFhz+xJf5A5AOtnTkGswOjRq5sdV1RaoicMoTu1xRZYs0h\nkD0t005NQHeTI+Is6eKkr2Zd8B13wkb+UPyu7WXOdEc7u65WzcoQs52wp6Gr\n8qDWK4Eg7Fum5NRpB1UCmW0qkdckC9gGqwilQqaoheX2Zzzcc+cB7NVNUfsz\nBdfY\r\n=2tJb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDi5W9l2pkukop89yEo0KAR1Eqh0+V3rXLyar0o5elRCAIgAriezuy8WcNIq3oSPw0grOAUOk0TyloEJ1wHrSS3qEM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.cbdfe453.0_1583358275366_0.9128717083320705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/top-app-bar":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4DHrZw3hHn3lSZKC00jmQJ3ajBG6wlKJoI+WTAz9L/ZCnetnjZSK7fT8gJRQG5cD1coXC4UefXDRrE74+ngKtw==","shasum":"ae1345af3afc02d2262ab12315f523e60e7f5d2a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.02aa8a98.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRlCRA9TVsSAnZWagAATd0P/0xZLjU69wAc0wH4AYcc\ntT6zD4KObyFPW8LBAf6r9wMepnoyemM5xSXji2CDoNnUu6057+hll9Uv3MNa\nmOs+3n+FT97MFLMv9xhpeu1ETlNq1IIKi2ginp8gni4JmS3GAWB5ksnw5Z5u\nQEbpQum6N4J/0gh2PCRF8X5wbc28EeZgdb07FiU87LrGtfHx+0lstWVebtE5\nNScL1I/3D8ThUUDWOxNR2rQs+VOdyntQ7nrxJd1a71g1bRUnkL707rNPP3uC\nJSMyQwUljXtU4QA8DzeuXmge46SuJVbPhUXmFMNj58F6CF9znIW3Q72kgt8M\ny2SVwKJ8PpmqaFFSqenaPEP0eIvX2iqxxzDV0Rr2LDybHo+7DoX+e6RDoemg\nAHpg/WqQ2mRKdLPGjf2XMaCW499kTfQd0dEjFO5Cq5LNICklwHWGp0v/a6pE\nytLPlRgu1398+L7pGSZC7+FWNX5zNr8Y9zLs7LavJz6zja0IboyqQXPizSyx\nCnHaN1aSJqi+JhhDRieBdObp8UPjMc0MO+lZWgGCqPAgD52WDYFA4Ch2pdqe\n4yAF7azZBHMv0qbpFQGbz15dbBQnq7yQg9UoJTADSHzUYWGvFcgn1DSLOPTU\ny62iwzLuMzbQwy1gu4wSWpwos+mkOQ3QrIHy9RyHUmY3Nay4zCklMEnvy/nn\nl+xP\r\n=IwRM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+VWO2gqkNzLA10j2SeyQk0I6lY1sXqUkCm+szaKNwVQIgZBsEjfcfY7jq2eT6BzJt5KQLv707dpOTcdUx3+lTXFw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.02aa8a98.0_1583535204837_0.4947888321446201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/top-app-bar":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-yjWwM59iL0elBcAqLO1HGZNqzpbpswnwoRYKj63EIXYN4BrtAUBWO8EmmykTcHxyzXau/OrhHgXLS9TMiCeQ2w==","shasum":"8e9dcb1c7104d0260bcafcf9427176e2c9239569","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.7cd5aad6.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8rCRA9TVsSAnZWagAA2/oQAJ4kayhHgIPJd9KpnHku\nGYbY+eN1it0LISIEB0ArcCnZLlFOgCYIIvaweVhWO+SnNhH7hsR8VMda/xpY\nokH3Zs0e2m7kSxNNmTZ6hhSPNPwhz6l1yvhtZgzTalXUiECFNKW32lXtXGLL\nIxum3QX0un3+SeyjFzswEZYXwV75dhcO/UUydR853iR+jExzZ1HlBo7Tt7Nj\n1TjSU0HozlA3vB4XW+4LzyfoVrNEZ+sHrEnBVxFULpivuclm25rKfirDghy9\nzGQw9FkVtCIy3SpmLQHCyqfgTVzy715WX8+f/zVI4LjAOEGbjw9akC9IP0fs\nMAjHAnR8mCQp3/IJd8HrbHz7Lk+4RB2t6+3dBDoSxZkETpNctM0l03gKb6YC\nQzoLn2cgMvIxjK2e5JYWTtBs7OOiSNQ4aeH4LnF+tUDaVOLlVww0+Coes/7I\n+g9TgrnQjrNMZeADve1pbuDeLrvLOoxOQQ0fRJbFhNkxyjvNsZ5CUVY3QsGh\n276JJOnLj/PLl/JUMx7OW0GllY8XeVXSfaRm86VY6mNu/9Yfxr4KRLuwECbm\n91OqNhcTyhKUkoeSfC41Io8B+Iwn+f1h6teeDvTLs4qXxCnaHyWsK6N9yRtR\nIyi1VKNZ31OCGXUwN+qXCv2k+X6xgijwtjYKauFhmb38wlz1uc5h7p+aTuMn\noTJJ\r\n=WI/Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG9jUhiPgOtPyguGpspPZ3uN22w5hAbHY9u3zzs/ZufQIhALUCFiH3V9UbBTaI1Fgt4JJSzj79dKDk0OxWpwgKENXx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.7cd5aad6.0_1583796010188_0.24182722367984488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/top-app-bar":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9vVDdmTsPaU3NJmIxylkyXe1HMDz6cAQBtAbenBs+hC0apcWy2VOEm5t5z0HieRZx01UA9t0gxY2q93AKv+49w==","shasum":"b50273d235f08dbeccacaa27362e8a2e825e1986","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.3a79dfa6.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHMCRA9TVsSAnZWagAAm2EP/1a40zA+itKpuFMSQB9W\nKuDQ6+DBqBPI7+DpFcbUOoJn3mKs0eWMXFW/0yYqc+liHQ4vza4D/np8GPTr\nJEJ9wJr2KpOMsF0/cmsghx39R7mjfC8XfiUicP5NF+9Too03YCRe84p/2Sl/\nakpvWr3R/hxAro1r3qfuagcv75OOALSU4f6HccoTfSaDyh2nG4KPmKXtVpP/\nomyeLDUuabjHScdHLSG4ynNirEoRkuRzmpSBigZlRMs0ONqFBnsZtfX5TxHT\nrZXXQ6zzr5YsgBkc4mDu6vCLrPj+rdmxcSnG4zr7jq5E3QQWOukHZ0OSc6N0\n8U4OX3P8357A15i7wkRJVBBcPU/Xv1+QYVkaY6btTZpGt/L1bjpgTlGWx8YN\nPYsEO4YUMNI3XoKi02fOGTrIEWrCLMpRFDHtQwnZX7oz4S2Hu+jYfAeuSaYk\nbXsvddbhKxksvRQ3itChgEpK2p6uRJUvHH6eoCZtU/LKT6q4tKZyRXtPYWWh\nvcET3So4y1F2bWgNtHcTvLdoJ4/yPTaOnLg8fNL6fS1aLupp5bgURb5C6rhf\nPdSKotvYullLpag4cy62QZt5NGqlxTgRm6CQz0p/qYPnF11P9bFXgqNpvt5g\nvoV0McnoMH6jvM2BowMIA2Gl0F/4H39K/p+MrWr1XGE4ar3qEa5BkUr2gBB2\niLxn\r\n=FRUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCimBsuFvZil5UcXzyk3DRpOjzzks1m0d5kb/7l2v+3QAIhAPU6NtIh+YDge9jCOIJaUkHqqv29EyNqHhO8nTZbRxHR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.3a79dfa6.0_1583808972291_0.8219831557417299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/top-app-bar":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7f1is+QmSo/leyg6NygktllsMFfxOkakjLhy6cnh8u8FZmkQn/q67t39Pa4CaiZB2gjQc7wymsAstg9etLaSEw==","shasum":"e94389386a761fb6dcb4f637ea8544a3973907df","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.22e0f5c9.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwK+CRA9TVsSAnZWagAAWZMP/Ro7Vlwa5sIIPZo+mXPF\nglqo9foDHLzZtNTvR2BwE8LPggHe5USpj9l1lHcAK6+4AmXROaXB1rJY4kU6\nehawAlWYRw8umnnZXRzBZquvHdIVn5019HZMJIeIPS2uQOB3ivkI0+x8Kr7E\n8KvCcvynuTr2BX1HK5DT6RWfsguoI1cJGFOIJ/eCJ1TpAxZXCv6LMJd6MbKh\nFqIbxFnK42S9Z0i0DSvNaJ6Tgr8YtihYv7uFktCY3WsgEJLRcSgRIk5qh+hM\nbpT53yQ9bEDXhqr35g2H0QpvUr96tRMZDcbN58g/ZRLIzhk9QZZ/hOcK+wKM\nbM7o18b4pWcKjdE8JWtaNMEd3RawsVnDHa8eObZgnBZdnoaZwoMeMmwUcQCd\n9tNKDyw5uRjUzVycWUZYpb/iGvLLW2VFZGUEMW0Y8RDmPkgC/VRHsdMRYFl9\nB0ujJ8CaWMI0l2BJ6ElAtESwi/l/6zLCETGEtOpluXW/lfxPeL7AlkWJl+RE\nZ50Hmvk2SEDcsiPg98XewoSp8ZMa1GzI5vdss0WIRYioDEwq+Op9Lj+56SH9\nKG67nj4eNvaD4Hp9KJbRIjfEysfFo+9zy2PCBDzCHdpOmubvZsG/j/lgW+f/\nScXLu2T09V2N02S9YA0ZvhSS/a4sz1jrpmJNeYn4PBmiC1AkHhI3xQBdt0/L\nLvmF\r\n=CGOL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKxlglv605mY685vgTuNlg+/ZAsmc7EAUxReaqq+0hmwIgMY4yRgPNphtAnsvZYdwbBs9WgMEFECy2m7iDCgh63i4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.22e0f5c9.0_1583809213718_0.13379530709263254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/top-app-bar":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-iatwTWiZrwb9/fRrld50qDlAOZo2NVeJLOqKg0yapjyg9ITqi1NdEUYQbFqXUVs7WiG7KFp8IJehzOfm/ng35A==","shasum":"65e9a5303791c79e8a9746b648abd0b34733d996","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.f23a1d1b.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8ACRA9TVsSAnZWagAAbOcP+wVKaBjuJ2FK9NX3V3S0\nQB6QonQwQQhnsAQdsoGQjZlhuKFr+iqTaF8XOoWlOUC46Taa0aH/3WNqf0WH\n0VknO402G6rmcfHX7DU/xAcjVkDHgTbwx6rGASkvkpGwDjt7pjRVmS4bccMN\nzp0RzoqKyzTgCmzvbx0wtRZi37tp62btctmELYDyJMRiicrQdukfJB9MemXP\nRPDD0PBIZqySLw2zRk+jFDjmsNEaqojhHn4pYoX4/spW3AbWpYs9hRXUmPY1\n3qFCrQwjl6fXTCruBxgH6PykGezaav0KptIQ/qC1JuwMNJ3pLj2zWASndkoK\nqAIunMrBpMVtEsECKtsEjZOf4AgKETfDleusk4IqvvGzeiWfTkYAOGz32IfB\nx4r7v9l9SxIihcxTS2ulg4LWkTdogN47a0ublMnJ8CWbxQfdphwMb58eCcU5\nPrHwTmzQM6CswZ56Nu2u8R5zMPjolqcBGfAd3M+ZdgVvU3Nc0gtRrUMy+Jmi\nK7KYQM2HMc5ESR2AKAQzlzQ8DEgsZcm0Qtf5saJ6IAGFqTA6h/dXzEjAriEm\nusaYqfUPPWC842ylfQWqu8yO5XEGvHRTZqoD6tnmRa3rtbpgj2WPc4c1ecso\nDqQ1390mQGL13RoEm4dQc/XazSomHAhc39VGJMS3SiIMS9Mem4gtCu+1tZ5B\nS4hT\r\n=VNiz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH60ZuLOGahHnUuskkXnWaXXUp8NgD2oRfZ9PdV0ld3iAiEAnbUYcTtEigsNzMg5NNPnj3KNKyTFHlFSKC0iIYEVBLI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.f23a1d1b.0_1583873792460_0.4680223130946848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/top-app-bar":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vPPHFmOVw400xd8xbhy0ZBUsOhSpSzrDKG34LXfYgFbEWgLWRkXwdKulL6ifDJ9eGD+ldcD4D2JSsRzQB0bD3A==","shasum":"5173a28d7e998b226a07952b6ff202b005b3f75e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.34b2d69a.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANFCRA9TVsSAnZWagAAC3kP/iYEaamlQTABtZqH4m1C\n03AsIzkUsA3RKAXi0EocjP7tj5Ww8WHBQPbUCfwnKZOT8IJA0+nUBTWo6Ffu\nG2C3CZbNSL2YDLOre+GMZMhubMYH5c6NBasO7BB+iY4/S0Mi/OIBxbGs8fXW\nhERjfLSAMnnNRIuSwO0OM80KUnieXFcr8kUly8jy2ByZV+c+IZZ9IF8cV8g9\n+FKp+mT53n3djjBD9rlV62Os8z+xadbwOMFAvpRyq/E8A4A/epmSipH9zjPt\nhJ8XlMmPvgsOWfPUMm7Kl+gXjBKw1Iv/DX68mWR6lus9MLDlcFCf5pIOvb2o\nnGSxwmfBFyMyciOY1XPmNwzbDRM1BotaIUoeVdd83IG44MQQ78O9lJTJZXjY\n3m2lXzZLKkaUClkYaJogESxmv8zPejV3QX3SYOmOnu/UQKS5sAas9BPHkds6\nUOIi7bE6kXr/Mph1EShf/6bPUwnD+tvui80mP5Ga4DTkQIFR1dBvJEnsp/C/\nNtOHmCIPNtqILImJH0OXGtGOBQlLOlBbBU8VIkzvL9+mac9w6oFuWNTXTUpv\njHUGW4GUKPjo2IcvFXBw7i+/83Il0xIfMPz6rSFH7nYdiSD4ynpeAvmpk9Y5\nSev6UVjuLeTGfe0TodmhoMXr+U2UbsZPOP4v5PSix0UxYD7zTWTPejOxn0y8\nDi2K\r\n=y+wa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSSCc12MUFTAEV31EodNCyN5gWtd5DEnUXjHyV4mMDGAIhAIAOIocuGtb9+Xv3Ev1rvM1DyIxaoDuzaGTP5sCi3+Jg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.34b2d69a.0_1583874884788_0.7114871531892202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/top-app-bar":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-wJTuCVPFYfBvpU0VteCXACoapEbORKqAh110BSx8AdkIsWYx4Cd4DUBeDgTac2ZqtDi1QqeY9Q2BTVRTD8QZZA==","shasum":"f90954b6d4c2e89c329e187b7c0b529dcf8648ff","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.dc04abe1.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5pCRA9TVsSAnZWagAAvlYP/RW3Aon9/SrLL434260v\niF0k0hk/Z1EmOxhOpf6calhpUQ7LMJ4/5jHf29LHct64PPyM4DJiIAZ6uHqj\n/YtbzVbYkjqOh4seUtBfbXzMrYxxoWhuZdSvw2bmFf9rOvFZjpuIXdeff0ic\n687tSXgWe15JQFQrjGAy0RXoU4T2e8Jwg+dKFKUNYNoDAyG7N2cXA54IrgLl\nAITX5Sye/Ka+R48oFLkEE1GPCXKvE10kvsy1W+kGKY+SAHx9s/Z6UxJi6TH5\nyfw/XT4zXzMuPAfKm/Vrb0PUe0ZvRwOioz1IJ40zjIUOwWyGs2RPxIM5k3FK\nFvARypVlwllNUZoHoOLgB2P38RzMOS4CH2oSLMjYVVAK1wldPIgV2Pbb2T4D\ntF02he/lci03OHkRGZp1xdTBA6hoCCOgkOBXhOD0hPDu0P6kuneq4D32z6hD\nPu8JGtIUtVo2cMdIeH8gG72BFB3NuxjpU20RiADSyXJZu9KZy0WhNIHy8lrO\n8r4PLFOtJO6a8O7tFAYPFGuj/eR4wqoDYP1Y3afYnhc4aR44GqCoeZZQxi+W\nN+5Cx+KgXYQgJvM72BsUg8Umv6OQaA2CMOhkGv0WZJWf/s6QECLsKRmgEGGN\ng3d9TEp+4o8P8MFJK+11KD9MuMZMSZZnwewafykzTDOrsyci83GkBnzdfoUc\nWHg7\r\n=PWLl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+6tEEWSieDxC1wgTCCRpaCP4IBJSHdaoxJMlmF3oGWAiEAkAscnl5ayFQbYWb6Xby9SdFuaWu+kVCHNe2aP+7/e5Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.dc04abe1.0_1583877737334_0.9640184420047146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/top-app-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-wSqvLhVKyT8bbqzfY5e1jktzVoKcoh7T7lMnA7cerxwAu/fxHLErYuferXhGZfUyFzbqbFDP2uSxSayx71f2tQ==","shasum":"824b6c8ff7ef2611fad2d7905ecf517c2b834a34","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.04ccbc88.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDIvCRA9TVsSAnZWagAAMWcQAIJL3E9M8H+IM33gEQFT\n9xdpGlaanxAt2WMWjg7ZSwNzzbhMOESOPGb5N9+9PrFrBD16EWsL6eweyD5Z\np+vPb/4AEhrKddCMh1WF7VQuM8Ss7Jv/iXzwTYRe91zYLhG2HWHtU0g1yMME\nB0v4WqOiWLPYLkusGpSxyjJudN1C+bMiRl6k7xMAUVg/DpahOTLHgTJwELz7\nCUf3oLZpMAR6cEOto2TMD9gAXM4BGKMZ8XEGKDf3BD67M0v9URSefBQ/cMJ5\neZ/2/dIf0BCfIIvPLlHhd3c5w+iRAxZybGnl3YvXEkvyIopanCb2GzuD6LAD\nTd+Kh6e32uocf11qHeW/aOB3AUBhRaZyLFTXjKVZRHgY/pStVt0OkCWuCCqF\nINwjUU4h/FK7zjxTO4zEvB6dai6rUeBSiTz1wIywgUudizU78BAIqpNmgciW\nlALRVU+jElzLzb2m7gOzODz1Ovq3pVRHnLTFkx2o/UUgBwHESxcpR7xaev2J\nsAgloefXqiQRpc1ciluBBEMgzoJkhDeA5qlCtem4yf6Fiy7yRT1c6xdIkQn7\nKPHI3SyhgFMlCzIT0b2/CnjK/WQQKzfWV519Cjx1f4cKD4Y2FjPlOig3Wwrl\n2GsQNjATDHR0GUthNqZPw2zRY42SCrheT6LPX/YVcGv9Oh++zPoNnBr5C9WP\najJq\r\n=Qyx6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBLCCVUgndiYt3R1jq3opwB1D5YzL8d6DviotCVmtnagIgIxefDwS9pZQkzZxzYzPAZGiOFhkEI47uXoUycUV1j04="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.04ccbc88.0_1583886895020_0.20624226090572972"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.55338c25.0","@material/top-app-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-OHWZ+d9I2j4Cubz9+eZRMlv2AD0COzsVcoseKMebnd887rAINOiq+EwrkGABEBXonqvMKBY94jKBY9scQZiaEA==","shasum":"655f8cbd597ed5a5e3b01a2cb5a43786f7a27248","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.55338c25.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXACRA9TVsSAnZWagAAMhYP/R4y1HGfBZhn13X00Uxj\nXlUZxmCYfRc/bUJYnxV1/HVEIw16MXqaR1kZtoqMMeF64OMW0vKjG9J0dRCk\n5L3ZgxjkTMpeQaW/2cCtpULnpI7KlGZdmxrmgZFv+21t1IwjeObxKEXyhx5A\n7gJzMb048DHJ2lMdvvFcFYZyckxQjygn2oqrMzbr1EwOPfMxY1WFMh1nDMeU\ntUI53BnDXZCTltPwBHcnG0jWyN9bg4XEOMWcjgMH2DG5/99SRO7+b8YaA7wf\nM/aMvnifwBvPjMZ9oFYuPGjk1FYKjiaIVZwLijixxR1o6Z/zl84XhVIocYFx\n7OyvTWnsQSr9pZz/KVtYY8LjEWweQOEKdZyT+f5k7sHgJos7LSFGscvKxvTc\nPLm5jEEjocZk/T03yzUHvV9YwZYWZesSiPvo1vZ9svvGz1L96Vs2jgePOsTR\nYA+rqhSi4cYKUvhTUy77CHs9PIsyAqOgPudTk+lOOv81XvEytFjbipb2+Ulo\nlssRShBk7/Z26zyTKBnYVxBqu6usmKNMXzVHE5NUN/pRlhDC2AU1bfmQz4Nt\nDZr9M2mf4ryjaWwn5An0kANwB5Mkf5pffdYi0hAKKUw5si9UcPIaPEA6SpCd\nboTrXaKyppWQnL/8BCgDy65FpdGz0nMnfY0LPdhWJyRJxvRZni5zsfrefjXN\nCPuV\r\n=2GzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIElMT/MvJRgcV0sY8fw2jV1y9Zamx4StL+xuGH5WvW+OAiEAuyyiyWql3auqq/4FrJ2K66ZSoDkI6NfLOTgtWHnL5jA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.55338c25.0_1583908288493_0.6556474536891266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/top-app-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Rai7nj1yuGNDsn4Zy34ykT5FBgqthUxLx9Q8CohV7pLcOZMHUfAg4yvKO1DqIP9rwqWrWPMR2ejWIQ/Yaqxb3Q==","shasum":"a55a2269f7d1d81b0433ec1eaf2f391ac8d3e738","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.b7e388f3.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfhCRA9TVsSAnZWagAAqaMP/ih9iSiKkXsy5gOIfxLA\nH0I5hA+WwSrXHBffef3VfYsaXy6aX3y9SA98mC+YyUNFWOQcJ92+rrspRiwc\noDlKcbYfilHK/0RQSEPAwlAC0J02m6J/X1bvF+X8WwPns5ZCe375b/rOgF/S\nJVQ9ICjybuPhx3Q3BUXqT1RN8ziYxyJkqxNM7rRcYvjTQCwvirgSMJ4FuEpa\nLdMhmmrPvYsLQ46mp+zhOklfcs8ZBDTNUPjmTi/6LaeXbtpmuX9k4e1ZpHtZ\ny2NBKdgVJLtT4wwqbwqwLAYaO1d1y6l7sUbDJTWGmoyqChaGLaQBVL4HkJlV\nJQxuUxeABMaNhVMSXNvyR6N+7lMSzKobj1m1fJsiXD30zQOjjTJBFD9kWN7s\n5jdytL7+IVncm6Rkb2NGfRdQYUh1zBTVViEADin55wWzDTCt+HPLvAe89wvU\nnQLruLeMmeTbr0TWotURR/fBDSL4aTAf0mfCbLyWRtKsUfEmVyeTlLfLVlsV\nuoyElZA9qRq8K7pMarWUY16xLnqBAk2/WtIclXvGEh73rgt4L+wvXAVpqDw5\nOPYgoU+tDKT0r6rQkH7gK5GeZW6J7U1ct4+HAEtMSu4gCsW96dnmhMXfuxnC\narOGv2YGchRWMWAMTFffOkDH2x0vJGjB3bjqvWgrjugEU/VJefCoJJhXuuYU\n9eOB\r\n=Z7yp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAX3rGwnxYw1wBKX6v/1fwmEd/+aWw9qJrEgZWMKm2yxAiAy5aB0UcmzpKWEq2zDfCxT5+gG57vksQD8zjP0yK2VQg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.b7e388f3.0_1583957985153_0.6395365156394477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b3211481.0","@material/top-app-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WEUcH7cT/OiN9uCpuZu/QQNvxP/O694HXXH1UfkjG+MJbMo2MLYZxiKaR+HLEWjAhIsUU4NsxorAoAayabsCYw==","shasum":"e7a1d3b3555e8187e1f0ea6e272ec4ed8af3be99","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.b3211481.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjcCRA9TVsSAnZWagAAky0P/3TfeyLivahUp9I9DMBS\nm6Xk96jrw0ChEg2uQ29wxRpZ59EH7/U0B3ZiL5B0JEG7JF0YqZf3TQGFd+XJ\nM0hZwbQBPgEBGfASFfORcimuhfQ5NbPPQnZOtcKQY9fqdqrVSnz+OEsCM3k5\ndp0NZPGNJzIztENM5RkpdmrzbIm4Fihs4pPWtJT0rYYPOy5LqTaynpZyBeYW\naJpt4z4V7CauM778pjbVbdVgUKUr68Y1MQRUPEzFWHpQRLAHfVqXfDKFc5zU\nEPxREGxTJ5eDe923FrRKKWByxMfoRpF+iz29AlBqFZ2ymPrMuoXXAbgstcWb\nv3vHCDLtEzmDDSA+v6YdN1ATr0vQBwy8CSw6Y1Pt+r82wkkGjBt3oTmkww8L\noxWNUL27Y7Rc+wEc1PoahTSep1ODh0E2hn4kyza0r6//xcbgosNj0IZTNwYX\ntLKbq2K/SviH2agBeC6hxaYJGc0wiMjp+lbdZQUJzx/cE3gQ17fibJX8kZmw\nJ8kKn0zZQpDS58wIqqse4LAZEufRHqJSOC8jnJ5h/3WxPpQDMPs2rvoBeD03\njEPsZAQBiRZ12lZlXbg/+Eokx8wjTVShfgGnLPx0bwTD88SYjbA3Gzb7lI9a\n0Iu/UIUS16pMpt3Yu/Nnc0h7P9GK7LmNugaWWe62QN11CJb8leXcpkN+27Ig\n2tTt\r\n=eP1o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF07dI3UCPsE/sc73g471waPR1xvsfOdcwsvHadVlixkAiAZMec+riW2w7RqM/k/7mg484vGCjYtbYUwh6OjaymsEw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.b3211481.0_1583958236106_0.11160628396471117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/top-app-bar":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ONrSUnF5lt9paDiLGANfkgWNu3QjCeQIk2ZTvkofy++jGt+WJ5JdtS0eL9JmPYDeNKtTpPqr78ew5nNmyOc16Q==","shasum":"33eb0dc42ab7d030fe7c27244a1a158f22028664","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.0b5c7f23.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3vCRA9TVsSAnZWagAAYC8P/1wqP4IYjb9AgaByiGhX\nuxUCPcIuyk7PZQ5G7zogpGWjr6tDMBkT15gmt5q4qWIi5kBLXFHeMvPt5tye\nYdoQKaUgYs5teoXQdIj2MAv84ggYwjelu5wALj4Y5BxJUZ0t5r/7IG/g/a1P\n4dEcjbLU3akAwWCpnR5Vo/bqvTyucOc+evQhurdHgx855szxl2RmHSsML0sK\nnbE5Ug38FO+8xY8jBSnEQ6zj3wwH5EcL0dErD9+XWNgot2qX5Pzy6VwWSnSg\noQviDdhDS1lW9aWxLyfmf2WfvqhaObf3MmISZUD9Tjp24St2Za6gRVbwF7sI\nT7qE8P65yj4TfNUYpPAR5TrcR+zAAN0jW/1hfpn7aKT8wYtoUSngjBKWhNIf\nTcyx11KlhInRQHrKYtssGvzR7SrZil+41ZfipLgj32wLE6L+/X8JXB9YqYHB\nk2RqrVZFCJO+CeGdPwZpkJI8A3R0BEHhycsswURlHJ2rNgUP/fWusppZmgUJ\nzYX7oGt204xH1IxNOY3zOcYIS70LoIE47jPbS8gaaEGUa4E1ztNVq6EqL9Qu\nrq9Yvd6L2tGTbkB8kmyrGyYcLAmV7MWxrHiiW+zwC6ZDhuk0oNkisi50T/Am\nqzeY9/hgqhjQflOJ9Te29S3JrGR2t1iWANsHEyzzU15fNpT4qOgVcctmgN5H\nlGhn\r\n=RlDY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/lPnA034ocVnArZUHBbB5+DZexxanCh1DU7NHAg8JEwIgaqfMGoOZJYWT9TXmTXsOeuU/gc5FrUg+7DQ1C/6/10I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.0b5c7f23.0_1583963630909_0.27759573211337507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/top-app-bar":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-u2QIxaFD9scukyCq36ETKhEZWkVFzymGytRsg8kngeYSGJ+t0Q2uCrlGspX2VLs3oPQOX+TDpa6hj4cbi6O8fg==","shasum":"9169c0371683f048d62d7acc3de3067e75927aac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.6c0f0b27.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbTCRA9TVsSAnZWagAAVQEP/jhaiz5AYnaivMaiDqhO\nJNSttuszSeLty0nemnpOzPSCRGB6dAYr+WAI9bf/lkh1MSSF880iFuyssKWX\nL9JkNv1NtSkbUy5wfdc78EdxjWUVc1BAYC5SC7inG79gkvq3rIshdPHGuirz\nS38OiHfMRLk+PKdCoddgT1S4cRQdIcAdOzC/7qkdkb34fxVmwXw/LSUfMC5w\naXmZLbEEsRpCNK180VwpDrN3bnHEGeiqE5oAC485w7fOhMgKVHguX958k0zk\nYR4TuwNw9fQEPZgZcwD1FU3rGHX3esMN82kFZACiTSGNt33uGk5s+KNpBJkC\n3IBm/cEEB7U3WyfdnX88uLK3vfSRPsWd8CDW9FR6YIVAsoud54GhFgjT5HzG\nfp9AsscnfE10KTGzJ4ZlGLvWUm+jYGxpB9JsTTWGXqPEnIeCxRFj5afjG3h2\nGvkQkLksyuR2bR/9lAd4P+WGdUWmdNvn2z96LRcN4aZ65fnPp8d6btwbNOB5\neFYLdNFnt0wPklJnT/kUaBOQYJAgg+G6r+eFsyExju+T06NDDLHaQqeG4l7X\n1DSKWemGxrH/4TeAQVvjdPkZrZx6MUIb3NOHcczaM6pcb9NCt0VAoDtCucxQ\nKAa8KdAVr2KYt0RbtQhZjK94FhT9SfijaVPgvmdtMek3ZYwok/Lt3ta84Iht\nw5ON\r\n=lZ58\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI0YtPZZSAXjditij4nSDAw8XiLhfNem6bfRoWsjKBHQIgOWDxjGSsdRvdEe+feTqQaw5NFRwW1wj4PoNX+0t7daU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.6c0f0b27.0_1584047827502_0.2727352450913938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/top-app-bar":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6qG9fazbJ9txpjMcVGa7d+h131TAYiYo7uO4ADgcishjvVCSVQdec/T3wPkEmRM2yvdA11cglnlJtmdIf340jQ==","shasum":"feb66b047b6a8921954f1721d8a78d820a903a63","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.b6c53425.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7r4CRA9TVsSAnZWagAA4ecP/2kq6v4dYCMWaYvxO8Cw\nr+81LYA17PSQwweLzchsBvhhTEsp3Rs0TmDOna2KVmS+T+DfllY1xdidiX9W\nL8cLanpqKyt85V+HAq3amIUAODapm6WznMfiDoyVStD/UKUyHbGSgRx2OUW5\nqS+yXSLhF/Ow2buPB75BoEcbrME5TkMNB3C+oxMud7KIDi8/4CDl9YZASLIJ\ntcjVn+gtWEFcbsZIqAUhgk52kqKRO2pkTmyPIEuNq3TtyZRGkR4Zye8NYHJe\nsPh1z99sCvrmZdVxIrxeVxQQPrdURKrGr8H9QLfBePdNnBgPsQD6JsyR0lKi\nsZW6k6c6rhHDRHAIsxzy9ndmL0iCI9l51tFeMdF3hERS9Cno/ItG+1cmbxse\nzLG+l9LvhcrB7/INxbUMxa46B5HmnwvZ20YBOX+ongpsfBlX11twB3YUb+sE\nMLOsnw9jLOWtGjV4NbQKX8ZdbZnN5+Wkc0AtnoX6LFEM8Yes/tR0Rv9EFQNw\nRNEvQj/ijA5MBgKYZAsLIqFhr2vobJNUdIDIWWOuX1AMisTNnPR5O/qIpTg9\nF7qUq49h5HEwb4tERYkZM1K4M3VKyjEf5APznNBn/9j3JKdBbyMnm8cMtmGq\nUTdir53y7mXMYimKtBLvWi2XYFshRAm8LcV1LhRxoF19PX40sO6KZkZVg56v\nzrfH\r\n=YoI4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGtCdnHxEU02rZDXZshGEsrBdofCBr0fqs8Wun+lde2sAiEAhyJrByXK1JiB/Vf9mGHy0ng24xxHfPocsXpL2sMTEYU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.b6c53425.0_1584118520079_0.15733180273490444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.306cabed.0","@material/top-app-bar":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-OMhLaOSUa6vVswmcdJeP8l9b/IuSboZR03jNlQZDWhPqoMaGD24N80obBlfOz0yCMck6MhWfBiOTxxCpsKOBtA==","shasum":"09c77b21c31b55f590fa28b32d2ebcc059080476","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.306cabed.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT53CRA9TVsSAnZWagAAh5UQAIOpADXD6/JlMahsLmgw\nGUtknz9atTF9+7ws3yMjeBcOFD5iew9/Znc6Je5CTy4Omgk2ax/lweMWl9Vz\n1e5wdp2hrNZkFt7LYnxL2oqRi5Ld9MSvyyvhtg38ghrc5Fy8RI/OnHcnk9zD\nPlj4TD6VRRri+BCWgHxWOA3JPnZ5l5wUWk0iSoCOEZbJe3LksnSUMnCVvQ+s\nsejhqjputw0vAQGSBLZFy96GU5FVCiFOLQt/zXOFnkHmmXdeIvm4CYF9H6M7\nJFjhs7fLg7qWgMArwppgaCMB38WyMpwv5QdxZA4qlY/CYPdrirZ9gq5sQ3Dq\nNtwGsU/dOwzo6OyvSKRqrmKhTOfg4izx756XOkCwtoNBtnsOAlSQCG8/p6Yw\nLju8WdVmNqjln7OBLaGA8HEfH28ttKg8m2TO4SJhklataErMDAdxn7PgRysv\nSmHNPsWnnA4UdqSv5PDDeoTHbXMJdu/AwgA0yGBQec/0+QgGDAlJaTbDBKZb\nFnr4rDOtKKIgdOxv1Wey7DLNSwDYMIiwR37uQlZVh/lEHR4nqD+kNhamdIbd\nzJG/bVcZP3XIrcX8ZruQrPaQDpquSATWHSGiBwIjU+euUXAV9EXpJvsfg5/u\nPIXmmJwXPwkyodtTnb+i669dj8LrRJHOPg3GSMN8JXmXIhwemP6163dyvYA6\nXAOI\r\n=fzsw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcrOGpvVzZKA2IouY8reO+vn7aN2k1Hm0bsLzb3viwsAIgTne2W6D+Ep1ZbEXVnq4J6XqKY0QnyoxEVW7zJSsxeB4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.306cabed.0_1584479863294_0.3384099511995531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/top-app-bar":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gfmc2cFnVwuP1aHkKMEAkmGMNlmHyKMFqPYEYgFiwFo0OGfegLJDg2qnum/ehGEUlWKjzG7+onHFk9zpr3AcRg==","shasum":"ba5a58df87685c8ef2b75169605d3289e9565053","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.4e250cbc.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/oCRA9TVsSAnZWagAAVpUQAI/ByaJDhHS5gHQTwJik\neubQzi58A3soJrIOkACLYMemXcnh+4canEjOOJ7wTeYIzzmh64O/rGzwxiR1\nLwAiH6SqSWbeadxCx1XKWX1OZgR0oVYmfI0iWBZysZvGVEL4hx2A2rSlQ1QN\nql/IhTpWSOG3M57cxxBJ8cnwvRJZ/qM8LxBSw7oJmhFhzQuL5hO2mZq9TStC\nimmLqsVqYA5Ueb68PFNCb9UCYPzbdc8ss9zrSqKzrKs/c9EY1eRuOEWwRwTj\nCv3YbYEFL7IyRai79mtda3BkVDPr4Gdl+BESeGxLWZOduupmnkhVaNzQljBm\nWxmXVk1TMkx4hiFxvrvwAP0RPXZTYVYnoDej22GWcu/U+7NNH385m3SgmiQM\nhyWov24+suqo2eRkIofPjaaaHlMzUsuwdudsizKtzwsGO2zlN824u5dtNcKc\n/7RNf0KZgquoLVAjZjQaSUY4I2aurE5g+fYVyWpe7rDV7GOQi+Eq9QoWVQjy\nJ3UKS/ch48+cvCM1VgRyLK4ZBAg04rPzVbgCtGUusKOWWBu65at+419XARnt\nf8Sbnb89AzNgesCvdv1AuO5mS3neoxwdneYW85G2xXqiy+cWLj7CeGRPYhTn\nNLtRWM63f9vQj2JD6N5GzQyFY8vzseKdbMBfza2gfJX5GQ8NKJV0vRblY+R/\n20oQ\r\n=VLr2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM6KenfnWN6wVSaVMR9OfiIw8wNfALdaDFKL5Bm3xS5QIhANtn58IRqrQd7mBcA2W3lJ3WxV34MddM2Ds8BmpWunKy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.4e250cbc.0_1584480231913_0.6759218025080795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/top-app-bar":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JAyneTwuPqA9OxZL9tjeUOR6jIzUHKnT5tg7IRHkR9D9xyIyA2ZT8bakmneDw7Tuo0TWhAnONxqzYjjN00RHXw==","shasum":"7d3b2d873935edb9fd5759725a21cd4a2eddcfa5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.ff82d9ec.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmY6CRA9TVsSAnZWagAAvZUP/0SmQ0Rxfa14XQoaI9FS\nnu9Z01WklPrbNvraxVQMmxR5iy2owI6j23RpYXCDGaaEXr/+r1PGu9ZSqhYl\nopWSIBIgBC+3oTfWpj0hzvpnOJo9c91XexLfFdR2496Q9j5gDIxenDh7l7bX\nts86NwhTeKgwy8Ie/HIWMwVvwp0i/vEdakxrqqB/rC4BiNg54zkVXB7Tv+n/\nH3Xnc7RDlFYPbYRAmvOowOzM+gW24jRhGz4xM3hF7HvUC3PRZ9thZ7WwVJ5I\n99JKU+LQRi/DN662HUapwieDZL5t+DHTxeoQ71xiGILxA7F655j5rrpkRer2\nt+VczEsu8D9uHMqHIDMsl/GrqwznC9LaoIbnKMqwXew9vUDpGfjSg7Jhvuzh\nIixEYclp7Bg4+QtGqvl4qv6NE4GO8JjCuPSTfEgBy1ph0YMy7k+SKHmwyfl6\noP3KoJueig2bm/RoXJXeI0jCeu4n5xySJJS9c9jWPtsPB5gp28QtiLRXRMOM\niVc3oyauBFIFbnVC9dgwi59dLbJHDw1gufqib1rF2ru+WAEEduZM51Ek71yZ\nhkdHCb5rueanTCgfFOnv8iq7bnY5WqW9IR8Fg1kBcP3Ycv5vvO5E1kFIiPnx\nV16a7ssL5x7nwOnzw0ds8O5ci+tXU9l/Wq/0JPIP5J/tFclyfdzykjcgEIoj\no7LQ\r\n=UPQA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpOZFlX8aSsXGju/4AS/G2baWkeTaxMVMGvG7f+1JIKAiBYKemIK6oB5vTULkMEOt7rNZ7aZCgw38EhaAhMYuTQdA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.ff82d9ec.0_1584555578099_0.5307831161886687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/top-app-bar":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jp0eNjkjkigfHQlX/vlzOWCo37/y2fl2HB9hwvSbhY5l4aZaHm9WdKCezd4weiqKPjrdEKjvjriX0z6v8NoCjQ==","shasum":"c85a5bb078a0380b8a8603b6213c1cbaed33f042","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.f50f48ef.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AYCRA9TVsSAnZWagAANK8QAIDSZNHSmFt0V9gien2r\nEJLnN4ieLKYe9V+b96wqVaTjbahdlHYvImk7gtx7mJGL7tCHZ0uL7/VLziQm\nvdsPzH2eRxaLLRq+hkeiojpU/21gNMZtZ9kQElbQBlYXo31KDqmhN6cuig7w\nmIZm/ZR2ULtc11zHtr8o0ZgyKaD/oPvRt/qpuJGG7Z1QZo8zELOiJMRA4kgi\n/1QltP/TJyHeZsxMjYN2qFDczbqY9Eog5hByEujp50+i5RIZhWjnhrTHf+jW\nmEjJNHkHCesPc4VUaJ5yHtqxGZMurv0WxyZu9RbJJJuSdC4G9uka2EBMqDiE\nMsgRDx6BJS98WC8DYb8S1IRc6ZMhmyhTj0xsxV+Zp7hw9QHFK0Lftrc9Q8OV\nspBgGApBBIAtP1yQEFktZSiXHseeIhOuSCX6j4vDdcNfDr/pSnx8U0DZUU4+\nK9OLAR0NYEaWNT3ZncahO8k88fEFLbNAdWw3n9bav4EYNnGqCFMURCclYEOa\nrDMKtpZe7kq1IMVi+SxGQhg9tAVaGEPqOnSMpzbHiza/CiJdgvG/df2P9rsS\n5bE1jlNVHV85ojOdMXQbqa6qrdov/e4QfQI+ZDCZHtSD6fq+1yX992am9RXf\nE46mXVGvmj5Dn7QQL1F1+7Nywmu5hTGjwW8YG4xwyUxNF+ZCgHyNhKjnol4y\n4G0N\r\n=Papc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB4z/sBeB8Junrg0dZ5a0bjXvXegBTBAISp1hRX1TGBMAiAtZSRAMjIdE9ctZ//UbB3tkmBuXtGm5t0anj4Q40oW/g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.14.0-canary.f50f48ef.0_1584644120210_0.4473164902904987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.134cf877.0","@material/top-app-bar":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Y0HWfdsJ1Xxvh13f9i3Auu/7IifJV8cJDgbvvko627tRuwQLzs5PQ85hL70l8w8IJeSUHregtuk0mccRoicMEQ==","shasum":"65cd706543b076f0de02886ff59d7b0275593a91","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0-canary.134cf877.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9hyCRA9TVsSAnZWagAAJhgP/jr+HF8WbktTCfbGha8F\n9UJz4CytwjiBUjskpNC7d3zJIl26KP6SdOMEjA9CmesMthbjsvPa5HyWHPd5\noqH0YTS+JOSZkrY82rxH0sGIpEsFi8pwpGdRCv4BAtw0tH+/r5SHTC7BJTBk\nhF9vXmdegDxYVWyN8ymb8gnPIiwbpNJT+izIVS2oPxVA5yAA20eBg0N5Qw+w\nn+8gcRIenrKhte1IbroTCb+AKPFJ/YFEH6pZr/O/nGIzplzJDlgCXuKdHtdL\nPzpt+aKK4ohOI7tA2NCgpASYXui50u+9vYDs27t5bOnztT6tpK+Ai5mGB11q\nfxrxL5wYXxaJbHfQ+UDvyUXWFYk4Xg1nao3IcyiUEnSyx33wPyo10WWo9Nmi\nnVvd+/+3KRY5mQNAqJQHkSoWbXEuNJ2qzhSSHuW/rFEwL2rjw1Uy4qfs8TDV\n5HPSEqF/wPpdHgorOoUT0Ot2QrRrDn4SNeH1x4C4cSgyxoabMYjAoySZKyJT\nYGWJQgTqOHxoFFx40KueuuBKj7kI9c0WaT2GAsEQSVat4Fxd7DINLcXiD1oz\nwf8TDl7FkQaD3aY3TySZ6kst8PK2AWK2E/z8wVEBAdljkOfqSbQEdTNjOJ9F\ngJifPRlh5dOMQBB6X0GNZ0mkq3/cYhqYc6Sgy1ORGGIKsjXyEhLDZf4sSy3H\nczSc\r\n=wdQv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFD5kGwxGi3Hw4ghAbc262Zk+YdbrRwL3ZmugYGOF90BAiBQSfJDcEyVID2nhJy0LyK8F9zXaC81LJ/i/bYca+jA3w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0-canary.134cf877.0_1584650354206_0.8379406141500767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.0","@material/top-app-bar":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-iiSQo7NiAV+dKs5MqpLzI1NFAiZ2d3deSHhuhRLzcq6JoU3HUx9LYkyqu5v9XJyNhV+/A9S/hLFdwYVZ5wmI2A==","shasum":"5094d4242177918baacbcdb33360978ba7c87a5e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.0.tgz","fileCount":20,"unpackedSize":81813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QECRA9TVsSAnZWagAAX4UQAKUWEEDbiixz+4vCDHJB\nZw4xF+ZXeZaI9PrxnvAzVMZwiOV/PRkPWcqeLm1+XrNEH9SQV/Z0rJzEDpGd\nmKw++gxKQ+TNN2LbUqHkUTCletqvK3T1eeN4HZelLuP6LZi7CWbqBzRy3FkE\nOqEm0e4ra9miMYUNZ/Z9gzNvVLjObvpcaqbyyM4soSQRveYU8iBX9xFRjpco\nBmIa9YFMDU+JTVgFBmGbwVwDI6ZEOq16LYu9PevP3knw4clXAse+ep5j6wMQ\nPWjCGtSHlsIMybsd9IzFiMLNWK8EuqQQAqG7F0Os+vJBLmyJYLlZYA5GZYgQ\nmqNWul5ZXaYvEMRtaAjHJLoux+4s80JPRbUP3lxZqcOPHYVI8AUv2n5ABIiD\nVp77Jfmkg699lmHBwQnaUbqz2xVCo+t9q8MXR01JbUOmVGuzceylZQGF0Hrj\n8hk3fKgKpA+65/RmKTxYdCelt3No1g76hXdzAezeGsQouGVniVnwcj4KPVrg\nMxgrLY485I6UmExhyulggO1ltQ4KUV+IaR+d+CIWC7ljhvD2ZInzVONbSDTb\nyVrdqi/c+sDUf1JSI7CcVX3lYH/7GOGRJmVDqXTKqHTwOOBOfn9WkQkl7I7E\nFq91h4C41GwJ5nmVbpbZMw9RjjP9biljF8ibBylX25UK8FlifiWFF+cBdwSi\nmPhu\r\n=hN0J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhc7Qp85gP/2ZiMxl4RvtefCvUS6BZ12pEK0yiWWxGAQIgetSNLI3krQxL9VZsgQecd6G8iCM643DmfM+eE29nDNo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.0_1584653315981_0.007137399831454783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/top-app-bar":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vm+zx+CYC1tmZMT2U1qTwYT2WfOkcnwVxXNtumCpOrWkuQkeP4jyjb9+EQMXi8aFlpuCVCZTVZXmgwKMWSMklw==","shasum":"b7a26eaa0da13f5a7918537406ec739d1414efbf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.2c1a4913.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mlCRA9TVsSAnZWagAAJ4cP/2/sGU6H6mX/DUxyvuuk\nBCnUP12ICwzxd1Sr+zkCMcOYcMFRkVJ5cEX8ZP3yL328txli1vABNhxkyR97\nwbdCxucDhJ46dTm6Nw8O4McTizC43vHG2ZsQn7qRdKgET/zP3PZa3fuih3u0\nUmce7/sgz4p6dCcuyWXMO/u2XhWtVrE4+L5NBTM/CK3emcqO/4nRGNtWggVJ\nXUGq7bOAIjPVSJ4Bp7yWxlDfo7eXWJaj2D4npQ78955HI4pNx6FH4AHGhdmf\nh2wEYO4p5cpGLdtXZeMe/Moi+L5xPR+YVtdqbXUcBRM9Ca/DggzYTCSITH6Z\nMADMxzuV2DioKd4vEExTRwYsVoFzEV5sWKYL2Tz6u9A7eTwR0gjHbXpx5nss\n6vgDR9wTdb5dwxEidivNm5n+d4aDbP8tG9nyNJVczXxNskJlSO8Bl5m3kiz9\nsZzdpF3Q32wl7gL/j5ZHUvTeewgf7FV2hUeGcCP4QuKlg100bNYVs0fM/E/z\nzlzhSIofnlc3W60rXXF+IDnZtLmYHatom3LdDdVMX20q/zwSitpTru39uQww\neoyXKRQS8TI/FohsooFNHqY82hPJ1tuoWV8URZl3qYnH5oFFmIHwQ0YKkpPT\ng0S20/ZfnbrYpDLSWUG7/evqpUX35+/3BfRC1FP2TK6dPFW0ZXiq8IWVJ7T+\npfuc\r\n=5B1J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvGKMsf6I+Ld52v1rDE6w7IHeuWGnNXJ/XFnuQ4BIErAiBJuaEen9YILeJaWGjZNe6Q3wPAtGLO1+kZtukqA0cQhw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.2c1a4913.0_1584658852997_0.22563756639559895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/top-app-bar":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dQZ/XkfdvgvR7Th8sZXIudb77uhlMo5IIt1KoT8TS1Sx6QkRzoZ8csuIGlcYfokAxK22l9EHttQvhCiyVZEXHA==","shasum":"e74a1a7d7741889c05414dfb38120300125a7d0e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.3a6e481a.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQeyCRA9TVsSAnZWagAA8HQQAKQJQGU9tkam0SfsXI9H\nRsabLWBJC2BoizOtOliJ5U5pfeUQ2AKbuA6H0EQ1S/hVvQrbCgPIjWjyTznm\n8k0Bo6H6Lg8UUZdvO4IGiCMnjV4fMwBU6Sra8hvCSBcL5CqPTNarEIqYG243\nLObAXcWCZeIbBDUcC0Acgxk5sv1rT01d+UO9JOWwjvbclpN5rBqLeu5hf/sC\nkgy/vzFkk2R3x/xNXpidJEUPfB1UAm17NlnDDYt+UgSZx7353SXMaBCOMhuQ\nodt5bkZdlNuTZpbxCGBxu0LKJISs5ZSPztc6KSW870P0QclS6w5cPf/i5OLo\nqRMoT1ekSvCwZSQcWBTxEfGUUqfkxN9zmKWAp+FJ7ohwbWdQIQdpaxtgDfZ9\nj1w6JeoSYOL1rki7Qt7ULim5Q6nFm4/BKk4FQu8hIrK2+2JVgxVWJSjMCULz\n7uv3zGhx/yBy1S8GEz0H1SVcAANwAOtb2TllFjvSnJMwf2HBQAm4wpuG/U9E\nWfwWgMFjnxB8x/sHkgDv3xYgSkNic8al7f8QW0mRhTMcVjl+YO777EPE0xEp\nwOpi2T/qSaANItd13gUzj9DQR5+UVd6z0TLf7OkctFSy84JTftnut1MkM7eg\nfupr91FfTVG2R5LEwXig9fDluDERTPxpLwAlgRoWiP/WZ7m69QmU3LlFNMBS\n6eHq\r\n=WH5A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICxvhuhLCk3c4zVbrADsbctGGDEX1b8lGFbCH4qwrnYiAiEAlzM6nmB5wJQNPPtyx1abmPys5GAY6QKCqlwkALY0flk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.3a6e481a.0_1584727985661_0.4782165931959721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/top-app-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FGqvFbbAnxaAnClpHnLzDH+9bJnJepbsdU/6HXwJIqUFIavlII4Jgudn+xPQ0pj103xK0MoWzarYyzxwca+GZg==","shasum":"d556d7c1cd35adffdd3229556cb23ee3b25b2614","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.603d6eb3.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTcyCRA9TVsSAnZWagAAuQEP/3OyKHQnNcPeECxtziSk\n69kIjuHjQRhXKyar7JeqD78zIAWl5sVqeJI2CwBygzEoCmfZAB2cgLuUR16s\nrOuTFqwC9mAJA4rw6eGjdFhpsHbZO5i2Zj3Kebt7xegLvhTwJskUyUD2PxcG\n76P9m/8qoloECyiRhUIb8hL1zUrALrLnPqRgMgkJrm872MPJInfcXygaKLNl\ngQ+3Ige19mwLCm0FhAiJH7UT9YVKk89qgmbZrS9KD+vHe3WibkztlrBbXitx\nKeU2XFVtb6r7RfIfO91SJWeArri2wT1Kr84DoqwcYomsmd1yEOgkuzc9oIw9\nlQpWbI9bHuEi7g3H8zHU4AAL3eYSD3flmdFI2VGcyOv/VlxfMweVt0H3xSMQ\ntec875xlKh8zLWc3AKo6QFXNTl7dlchU6G7qZPzHWpyDLCAYXjOOonteiVJu\nVW0YF49od0IVZC02vSAsK3XyFOOPuQC2pRXdv3GhzAQBdwq/3x1h6RZwi7eu\n/ri7+nbro5l0G4d+Xv7qhLS9rWVrdYAvJSJGdWm1bg+F9a+N87Osymu7kbmW\nftYzZMK/uhWEX8J1U/as5GpPGfHKIy1KY5Zj7D0Pv72uDCVyPOT6qaDzdUbL\npK9SCiEiIolAi6rDHjL4f02z0wx14/G0oi9KlchBSaZ6tny7pg7/VG6ChtzG\nFVPx\r\n=DbO+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWUwYmSoKkaEW8LgghCUSfs/OfMQVuDG705wWZo3HzfAiEAtxj8IfqVio7HzMUeOY3mMCCMBTj2zGJ1nQCHgJOqSyc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.603d6eb3.0_1584740146295_0.29467005434211724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/top-app-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-taawNa9MsDRUbRlzMu7UwV+z0wEByQ/8ttXwG3XKYn6vkr000/27nRepkPA55SKY9Oi2DedtHeuV+5fGzgTCuA==","shasum":"ebd9288218d1a3e87f40ce631e9277a6143cdb2b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.05c6a93c.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWLCRA9TVsSAnZWagAAhpQP/15zYYmJ87yAe7PgpFnj\nLr7oViAPt2GZXK4PJMoSm6hZI+XyBFYC2p0uy+dbbNhgW9euqeoKkB6RE7ax\nahU9AYaqTtZoTPQP8V8JmWpBLx3Qd8/VJTv6oChryXg24Pkr5EPcJGc0tCdF\neyuIRwQjBAGTjhIb2EOX3ykncB6F0b9uPwL8Y65neDRKPgYuVHUhOGNyBU2h\n7+h/WtVwpBS6meYlN+a/okZ1aoR/d0fzdxZbYywaiDLYnHwEc8/2z+1ko/im\n11BqctHAXxSPp6Q/gvcSNmY/7FLs1ExOsC2tp7dPB1tzadX1r+BWtTP/dd5p\nwWd/72bjowGyQmhMKtbCO8XajmiPH/ioLY9/0Ot5IaoQR2aGERLmCYqZJyD8\n+jxLaU45Q3fL7wTWvaM7WQCTAPMtUK78Po1yG3/jQLUc7PkQH5qpZUPgMRcn\nDwx3gKPtA7m+0fTCXco8JaTc2uVe1ngxoKhYBLOXhGVCPIKri994xNJIxGi+\nwKZCRz0mm9MLRC/xh3sWR9u5pGSi2pIHb3rzE7J1S208xR3aqHrh+mlFzvSW\nceX0iMKw/s5rfexnEGqLldcctW//qhTc7OrY8qIwm5DlzCOo/LnVPH2x63S8\nDAZoZtwuNqUlorXM6rFBbH/nt0Ukwd+svJiA85ki7swjb99mr6rZOAhp9c0Y\nB9/h\r\n=TRCK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYbjQU+slug8z4NuewcJWBvJzcOMPjQaUQH+pSbBaVGQIgaB8E6ADmRPpIAxXChxNnUPcg513XSLdLv/JNXiONnok="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.05c6a93c.0_1584981387198_0.7079760011501672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.1","@material/top-app-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-oFpMGJsehAC0+cTTWe0wffjj+AZbz+f94yx47icIXUJNX9dTJBz8/t7ygo6i6PlgFI19x4M+oESESAUyT97qgQ==","shasum":"c559ad813aebfbd077c8a980304aacba5bfd6898","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.14.1.tgz","fileCount":20,"unpackedSize":81813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiMCRA9TVsSAnZWagAAeUUP/1ZhA2zoy8ycyD0qC8/R\n6Bbq3z6wPICi+lKRDAny48ad2z+2NHiQJkKIXe7WBk9PvEQ09RfH6zV70xCX\ny+TdUSrEbhLnJvDHuKcN7C2MIgv0XZwWWI9xgQh/Dq2vH2O3vERNb41uzgUc\n9icJTziWWSJInRkTjsoJ0w12ciMVS7r8MiO22Anbt+CDeV6/TO1n77MPVG6F\nfwOtQTTm7ZgNiigj4wKx5kO3Ek3ZtUmWVPYULfmOhYq1eroHr0YVghCd0nfC\nd29TRM4Sw+RSdnEAxQIHi1BIDFmmHCQkgTmMw1n2LrOHc/FLJkA1prIm4JaW\nXZXshFqeOFt+zlBTjphbc3nJlM/RrPs/Og7MJI0fPCAlVr0csCEWNOt0Bu22\nEhcfBQz94oAvZJTH9JFGrEm41p8t1nqkJZ0plI92E//cVDFbxtaFh1ANlYf4\nqyHHw7ZKkypkf84Ug6j4jTSyPte1myjV1e0d2DDncZgYJ3dIm9CiUw0YpxMD\n1nr4LOK64CJjbiPf0tmrmQpDuFMpK7t6N1kYrlvja/VK8FrOqNXkoI4ycS2x\n3UJCESIEkxqDl/8d546J6AZ81IwqFWEABgHAFtxEx8Slx/CuLqPh2MAWWeuP\nfm1ARfRwSxEJvXSWJR8OKUWn0LMow/0J8UEIL0b/K25THVjRL9j8tA6itoXH\nMrtP\r\n=GaeO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyhEA31lFcyYhuuB30daW1xcw59qxVeVo46ilrCdIK+wIgdrdfImZzE1ABCf0LwY9V8EP2u3CBc86FfZSj/FDqaC8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.14.1_1584986252517_0.9375471367711157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/top-app-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BBcG0tpCuj01hEFlAwID90bu6p4Yj4buNYGzCibmNnfNjYTIlQioG+qPcHmCv/5iZxL8cAB2SebuMN844VYZtQ==","shasum":"181b86baf76cd2a6f00dfba3bddceeddc2a6b66b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.4e6be3f4.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSFCRA9TVsSAnZWagAAABgP/iYhnLCgJCK3uZ1BSIcz\nLzpA3Wq8VyPj6STypLGHSb+ZE8mBxMDpmi13vSiSHwS2zque8yIKPC/D06qQ\n59PcyMbeMtAlmqOZBIgpI0Re/Rdt1t5UKX1L/sHGGx8zF8mViya0TThjAen0\nNGpz92RQKdbdVSIpBKGFJIWZLNtF0qJ5LAQQ0YWbrdR5FwWzSCvWrTwYLF80\nSchfiXQ6SAwqdXZKK/JDeDxum2B2qE8zOzSH00aWzYwSnMgeGlY8UVRDCSx8\n7xfPXCl31yLg1sWdNtC38f19GWRePLRVsRzBVh6+fWwo5yac+pIG5kIAMfc7\nii/O1iPNZ12OxiM8GgU4x2NtroF+VXF1EH/hcwfwshkjitsWE+moqm0wsZ6N\naPsvJy9jbg1B6haB7B20jpNMWoLWWt7AnWu6PymAYZLvA4jPdMTt4OEwYVSL\ngK7iN6By51scx7qxXxdgFleU7moPd/N6cOfjwxeJ3efp6lZecu6/J4TYydmt\nv07gJOfeP7DW66AlaeaLRFbEgy2X5VumoTlbYHrltGOecW7vHnquRVgG/5zA\n7d48mjO5W1qVWVzaVnvZf91lYsSLUYnswIVgP/tcGRllQLVg+bPcjtPsjd7D\nhoTCgyQC7uu2HYwIsbWCrs6bqvO5XYrLfmRAntIqaWFPYbjdaOYbJraQO0/X\nZWay\r\n=/PBi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERg4RUv8WWxw5vLXgcX48ukp7idJzL6I5PdBR1Gne9ZAiEA15O+5YFkLPAV5iRs66KTo1QupyX7FW6qI/sbimT7Nvc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.4e6be3f4.0_1585083525317_0.7111308552495761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/top-app-bar":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8a4Wd7l7O20cLZe4uKf6Bm7PKveQcqAeesI1YUIj+g03/hwGw9CUEFcHD7Ld8FEB2rH7MbEA9/lONBJeKTAWPg==","shasum":"edeb332ae61d164fd84cb82835739c6f7c605305","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.c29a683d.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenixCRA9TVsSAnZWagAAMXwP/Ak52wbsiV3Td8V9ATmS\nkUBdAVwxIIIb5ZzZ/MAyEO0hUTdLYIoJFj//6oG0GXyku3rEw4IOs9lO80/P\n0OlpHE7rDDOvl352vY1b+sqqCFIUd7icUe6TTJ+oz/MqxxrYeklTJ6fyPT6g\n9tIjTvUNk3p6v1OWV4RosTDdYhtucLw5WEgjbgyVYEEPrcXjeV0z5dPsT9l/\nCPRNzyRBCwkmU4sovlKQvMwaCYaLUOp7h1zGzz8scCWODiRaYSXRW9hlyuwK\nCGfGqCJr8ZimV8r/ArcmaLEHjsWVdA2esxHTfVXVV9n+aqmHK6cv1gt6Sx3Q\n3HKit/Cy1sTzdUEPxcqy+dvnbXtc86YvKnnp6uucv7bUSPflL1BzJbvoNBpz\nR3LDRtXF/sNvyxjmuEK271qCH/80cgb/9hJWHtR9O4QfctxBvDzuVskWaEiL\nEnyP4XejEakywCG2Nq+aCKvwQuu9AlwvjUOr7udpKFSA1Eqq77LgN1npC/Ix\nazVP6uaOtfTt7Ll8pcEKxuzXQMI3A9SwSCbotGMZp8uMKiYNsRG7JH3tO8j3\nEKQHE5LeCVXvzuSyAUGrRln/8Ny8R2YYpjS5DmDSFpLOyz+Uvc6At6xr+uHX\nWoYastfeBRok6455V8o73Hvw6oM/aQeseooU05PnmON4aHtn05nCLTmOQdCL\n7yky\r\n=8+Tj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhFItokHrY1b+haPuiXHdIRFznW8iikwMP/RjbrHEBTAiEApPAj+Z2aioE2gnbcKSH+IPnCJUOEMY/6CDpc6G+L00A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.c29a683d.0_1585084593221_0.37396901909819324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/top-app-bar":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jpNoGq7BW5NvJ9W38kV084TONseYdNMoxQIWnZgSsH2H80wR/E6jejBe0FiyzrD56+6cmhn2ZxyrILg3KBW0AA==","shasum":"8ac05e43bb76410b8677c4e7d5c88533d0c8a936","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.fca3dd9d.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsKCRA9TVsSAnZWagAAeAAP/Rj7Bz94H5fxOZImZ8NS\ne8f2zwRMiVd7KddzUdCtVy0kxnfCeuqxGKYaeOjYaDjzfoylAD591oWrM/wi\nQEjORQQrT7lZ1zoUeO0WqxnyNv53W7f/7t338gE/hVDRm05dgxIGIejiZ/iY\nu/aTRoJX8qwIIj45yqJSrjjuxXneFE8FYXGi1+LimG9qbcvbkMaNSVIJBim7\nkLKEiXY7VG1a1mhUAGHylOYvHtouYHH2zRCNIeLLAB7dtFC2k7Oa/f33d7KE\nL1064Zw3wfHHBJ248OySgtfxQS9RlzxuFw78P2iDFkTpZU/62L5lK3VgTSg8\nVy6qERPK0rUlAS4H3xzX8jlR1tDcyDl1ULio2iCR4MJBSyCPxZUEWfz6l7wx\nc9mgtWpRSDSLFq92zFFNogEdnO6Itbk+HVwdUWTzHwqI/GVjEkiNdOI/85Hd\nPrkgbi2s68Qg5MWMunzWsvgX1wVAYkIkWWhOOc35tuAoedk0N/NAMrxuaVSp\nybqTtiR20n/KXv4CXpSfjmLs8/hIhm3RT8/M7susHEVYipPhGDEpTb/1H6BX\nW7Fdu8xf440RNXBfszeekXHgDuf8kGAd+xtUEP6BFUdv/drJlgIa+QzhYZQj\ngL615fYCfzR88wMKC1E5Ya96ms+ceq79GP9oYLjYCiA5b66PVJinPdPIcIQN\n/Xj2\r\n=JTwo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBUwO9K6RdvWFMHX7CnH10w7122expQZtl4TCeOa/A2QIhAOzcNucvPbrPho22cohJ8iABsKgmPPznBfsjc+577+8b"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.fca3dd9d.0_1585093386040_0.1544325086713556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/top-app-bar":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-r8uVw6u+7AbNsCz/41u5aWkyaj4Byrfx2/KGV/GF7dcBqFQpl+lcMU5JW6W+TT4eZaPcztD3Fn3+5e+kW9MOWA==","shasum":"866f0271f0942db44f86adc4b4268a8340eda41c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.1e73da49.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81SCRA9TVsSAnZWagAA+DUP/05U0NyCX0SR4KneOgX/\nkVLH/8sbtbKlm/Sm++yKYpiFrpA6MswMdYtI2pUAyXBKGlodjvmszFJOCHUe\ncxI2P0+E5cMOYefPcWBCerSfrr+AU/7rDQuyOqc6q740rIEYL7lMxLI8Asok\n6i1dx+uQCCUwxOtcf36Llqx+U0AiNXH2wXqVm6VWEUhK3cU7mpcUn7e0LjHS\nV3GK6IQYaTNROYRNWf+y9fwTJ9o8bZaqTlmrn/f+Ni5SE8AMct07qRK7Fuzi\nQpAYrkwkRNYI03WHIFLk325Zl1eACdxYorlqAMNwgp+V5UlOvqNajGDb4KGP\n6afmCQMPVipj/Iri+YlziTEjbprnCCsdzHf67tozHteVXeVfXMHS7cqcHCkW\nzihWH2XB04wlsYnGIVkcQYnpMJl1036yJWzt6BJ4cxKKxdHiK9BYXJEj/fjg\nJBxaft5OZoFEv2I0htMmng1FvRi7NSG435OcmLau6gBAzGT+BBxoMl5h1uzw\n3io5i8t/Kj0rtcqw3GuhdfWl4lUW8NdsG0GeJm2JldgDznwfQA5Xld7chogJ\nFqCrpy0QVsYTFAffj4zN2vXQkK+SogIvb//txyeKHk814YVQyiotS1qH44D6\nkDGc/wrnDhcRUVG+EZJxY7DKol20Gyg4JKgb7QfQUYHueh6cT5OqmwajWvoK\nCwfg\r\n=RSeT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqwLMXlANTI5sIydz6rp/f+zAQj8M2xjW7TNSmlMrhCQIhAIKm78qau4HAqRFPN0ORUpZlp47T4vWWP4vDTMKEGt3n"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.1e73da49.0_1585171794243_0.32055796325105024"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/top-app-bar":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6yCHDpaUoAU2Ou1fp/fNQT1YCvaG71yxDSGZXX2eo682aqh51T/+PuIdjaaqFUMdTViyyuTw5he5NR5TH0Q9kA==","shasum":"fb3af5af390bac14448e2de2eba51b8cfb26a5e1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVVzCRA9TVsSAnZWagAAFegP/1X6HBGNHyKB3/zzH6Sz\ndXWbJ5Uclh5bAYvlGVkSQ1Q2EPxM0IvfRAIhuTVSourLP0nqpxmpeCXKDvUM\nmOiMUahQAtgUySgnQBVwvb37gCWmfirnWpvcNY9MYo4fPN0g4kwcEPumh+7v\nrjQbKFfuSToP1xWQwGh/CAdoDeNBm74u+z+Aq9k5N1mbsLoPFlhPIqlFh/O6\n90I7YEDVrdocY2T46SJrixslFgBnMOLZE0WcHyJe92S+AxDMS3zd3CZGZt2S\n6HyCl5Yq5JsWf7jZ7N1fSWAP4hBPMf1h7BHnHeIvmv1+sEd4MsK+5eGVzNyE\n/e2MnVKg5V1B2HfeM6mmLTQFJQEllLoCReT91VqeDS7/19uPGuNgabeGeAw8\ncRsx2tZUj+6Jixs6NY74UN95B5RtuK2+7s6sodXiZI9Kpz7l8Y1ZLldoTO97\nwuAGvFdrrQ2wTKtV3BrKO00C+Li9zmulNBHfD4duTqaaTqr0rNN5EDbzkVFc\ngFdWb4R0eLNB/MUiJiROTrCFkoO8UAyl+ZxNfn6fBH+5gBUpWpBmtlVRp4tw\n8cF5BxHyc9x2g1ycHKrzFwRY82yM3hjOvAYwNH9QczE1ehEHkJK3x8Yp+Fsw\nz1i4JChiN1PZsx2P/0twAJUrSVEz5V1A+ThS+uqymYochyVFDKUXFTWkYswn\n6vFM\r\n=VoDl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHp8vdZfciBSEYEi8tW0PAHWIyGh7yFX5HgB8BPEjzGlAiEAls2J07xkdJterKoPVknOmf8CjLSDHLt/385H7XThAjY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.bb6dfc5a.0_1585272179532_0.6181912152360058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1884603d.0","@material/top-app-bar":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/zu0Zt3HAleJL8pPzoGO1GRuNyRShwgWkKTxb0w9XwC3WO268ryflCtNbmSdGaN0b87d0aDNZJKUl3Bzla2Xvw==","shasum":"dc3cc22f4cbf9f13bd4c4f8fdeefb906b5c3ca0c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.1884603d.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefloqCRA9TVsSAnZWagAAHOEQAIGqIwGpHZtZVNNO0iVA\nVjfFhWC+3sOgzMHXt34KdqbqXrwZmfzmCG/iTyWaYHvztPOXX6BsDm139dUr\nsUlHLYxFlHf5vKmsmJKHQ4z9kI1Qb7kRYb/RyEy/pRlEYUiKdohUPE+1NtSl\nah/qyP2iPHJFslYh0XBr/18PwUgj1InmAf7dKAzShne3Jgqis/kah/Pm7r1X\nWZ351P0ss2BWU2XiLPTOMY6PGYMOj8/8diYjJWFyCfIzvxmVTQJSpV3EzsER\n50Q+6ARDXITiOilImktGus5KlZJ+6o3V1+GCemuS3PnaUhXGvNnJEF5JDTYF\nO+fAk3AXPef9x2VBrEWWb7SFuTxaNI6rsXoLnDtKkZ8t7WTQxd74zMk4R3XT\nkwHsD0FsLTJlDcanv934EHOdYmb3e1rDwcvCeEGVqMI2a6D84okTWnXaUGe+\nwlld+iW/Nf1BAadmaluPHJLSuyrW6QdQgLKEePKEF8nYmtQmt1p82cHEI6lV\nJSfc02Owdfry0+1mGR53Ewn+RXzEOmoEEWsqpkiQFW1yWPmbRqY8h0LFjKmP\nq8WXjaO98y4SXbLDdiod0D9Gxbo2VfOb1XNDWjfOZcecw7BrFSrGDfISQe+N\nbJzJsup9Ea2GRazqHqvBrYBE9v6DDTwr2AiSenN96XkG/Ft2q7HK9w9eEBSL\nzw/V\r\n=byCh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyktRDNKetF8XU9Q5/YEfLUstyRURt0Fzi8JEHOp4CJAIgBOpHXWcpzT7Jxvu61ZtyGCqxHGUDBLicjBO551xqAqI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.1884603d.0_1585338921790_0.2654691606217332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/top-app-bar":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-msKpgXWiI9VWUqeVPArgzZw3pn9IWKqSzt+UrfU9uY9g51ne2nDVhTwhyQphbOEPNyTJnOm9orwA9LsAKO2nOw==","shasum":"2f1400ad768ee88d9c41451245cc97b16292f134","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.aff73cab.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmypCRA9TVsSAnZWagAApPQP/1nUgBaWCRZ7lJu6fNkM\nKXr7rdh5c7gU6EwctDo7iO1pHB0KLVJalB3HN7SNJpcmnjJ6danxNU7fWrdW\n+IuT756MBduKmy0ugIjom/oTEpVVMtNZCxZyh6zlTQruHdajcLiiGcgy2T9L\naFpEtwp1qVhbXvP9/wzC0OnqB1HkQK9y1G/TeO3NBM8uc4B2d4g79Cft3Sjr\nbAO5IzG0ZqiHgAo+TvVi14smz3aGouFcfQ6Qpp8iT8ivMM17CBgKh4ZAA0E3\nb1J9y0TSy27Whd3xdoQAntFclpyEszMIoFD2sBsDMvpuZ6mTXxqauWOMjJeN\nJxc2zL9fAL6a4biJfGynb3VDeKINcvNXXP3fSO7qi+nsnZfMRpqUNbc/vBpg\nLusRN2vY9d4wUXAgQaKJ9ldnLZQVqIKyJyM23RHoapWvf3jOOZTr7RYCaQ+r\nprltJ+i4PDSSArrSzen6nds2JV0JMmi7mllBs06+1iBn3Jv8r76j8ipGRpAp\nh5+PSV9www01Z02EqvyAcRNdOMR6nTcIjs7Bf2zZFb2NPYnENTA4PYF7nndY\nmRpvlRHFO81ib28TSLu0lx80AWk9qi77ZjMGAw49ML3uVd0uVWqmxkrK+5uH\nmE8b7IrBLkb9MUjXJmf1pdOmI+sE3x0wchOkpSObVJELzltSXjDId3trKdDA\nvOMP\r\n=6XZT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/AM5qP4SqUA+2mjbxJ615CnouUNckXWDvBt2oDYfqdgIhAIjFTlb2GMTpJ6IDEnysrKg/p4XFBRqjWctarrhdMkQ9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.aff73cab.0_1585343656680_0.4785979950258341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.63168f61.0","@material/top-app-bar":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-o/ET0DxoUHFPIvcTLBAE0leyzmo4qP0Ndgysc5h9Pt88YtbEt7D+IAalASUhzJ4+QFdud6yHrFVLf1QZSbDiGQ==","shasum":"1afcdca803ede5bac3523a1e6aa9af2b43a1e4df","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.63168f61.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gICRA9TVsSAnZWagAAL4oP/3LX6dtqNBDMvS6pW4J8\nFMqgWcBK8zvKgqWg2Gl2BFD1aonw3eUD/3UOrvv+9bXk+mKZZqDWwgmFfK8N\nhzsmeoGZffe+dn4P/npfBB0GR9gVpRqxBmouw5gQUS8ADXOnpBh05iTuzjOW\nZuzOZB+Kuas94OAFQ8c4qgNKHPYI3nn0n1BipgEeyXJTtFXJJfZXfLz59jGA\nZiHI1fzpL2MB2CUBhnkRalt948yw/LG2DwYWYAAj56CcVgMbPT58xgZUdpPh\n+CyBTpCZ610k2jHVf0UpKEhzUzqvkEBAVY/hytmKL0ECSq5M7B1bHj6g8OwO\n87J8PQyiqOC3khWHBHE5V+Bjdl1N1tdUsqENxwi71Q1yzdN1ha4PiiY6540d\nJ8N+mUUd0ZhZqyNt1Bfd9qUs6yrj+aBDvTJve7K8jjplKqH0B8WQgPCUdTbn\nK7I25j0weAaQaFWCLgLPiSpEorsCOyDzyPrP4qT2jtj2lcn+ypLwQPCZO2zk\n7VzGcZ2QLS6xCSRrsejZHqJf+7SquMfxps18fAC9j2oCQ0INHqH31anFjmzk\nUtWAat5u8swDEBG8+Djf4+njsZKK2L/iAnJyWnDGizwhhcmw6Y6wyACIg+S2\n1IdiC5tDoI+RL6TZOUo5e6UKkcUShvmjwD+E+Xu79bkv9kDHtry14nTIHzzL\nHWNF\r\n=t9kB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICV9ErxMaCoVONpiQ62dba8EJnCPJVUTJUZ7zaBs2RHbAiAb6U7z4S88FtXdvTCBcuEzTMjNK2aSaHL7czoHIgPv0g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.63168f61.0_1585678344347_0.9805655662990047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/top-app-bar":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pvE2NUJBaiavIRxZ5YmALvWAdIFRqjgTxDbbmvyYdpxBNXlgR9Mktd8zA/wuZWJyJrJUIR9OMkZCBb15KbzF0A==","shasum":"2596f808cc9238382684a03205dddc92930c168b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.9fb79b3e.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QMCRA9TVsSAnZWagAAYPcP/0CRBBcCOTzdW/QVWYhy\nZs4W5ZXCytdH4sfkWWCIhvZCcDUfqwnn7pjii8tdSNDNzLu9M8ehjen4rowP\nMWF4B0G/JG05E/eknv6/u0soMOvXmqKZV8CbvFeYxic9g7EH7IlZmJrWNvkf\n53/93LyhiDuYGotHU/vEkn5UyR7OtPZDkNq2TZStV5MoKduZdz0drwDENHC3\ntCNzYh1x/hwcIHFC+BJwMUroWzDg7iIiGgGbScOkEfZgPmlXJJHbWCJGd3lM\nZ1o+jQmRrBY6+l82N75KBcvRBM0sOHUQAo9sdkRepy6zoIC13rItMzHR/P0z\nY1kcdNgQQT+mAiHIQhxhUHnQoOvAuWpSLcMOmR+mR29zGvMgqYLbvV9jRGan\nXE5GE9INgm95f0HYFCQMpx4g/HYMyG/YG9bydJ12nSH8foSaExBUgwbdcUGO\n+/D/nSc3WPUojmGrJMLX1taKRMFGJWfU0J1be2dZ5IgGYVSisg4tOBcpnRv8\n1lVXNxDNJntaL7yDL81edyAaaunmqdSRfagDi22txf29Ws0JAVlJNEb419ox\n7tZhW5z87GGmZtWrYZyELZJexFXrK2o+fG4+e8lir5svgTDvo3TuMWhN1SmT\n6+3rOAxwvr0j1d6OBLbx2QjdrfFGOqeD/9/WBjj6CsRLxYS267eHGFtA+LtV\n7EUi\r\n=stCI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0r3hycguAoROnw7e6DjUenwQvWjKrAgCLx2lCF68M7AiEA7XbAM7CGeSrQggJFFioZG0J4EymebVZBeDd+ZO0N9PQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.9fb79b3e.0_1585689611800_0.17052725275911995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/top-app-bar":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-fXqZifMjwU3KjCM+jqcAPCsreo05SPiv6putorKlN/JTFDKwkmHNeGWqdblus0Zxgrpvojd2FFqg5fpioviM2g==","shasum":"e854a29f92abd1e204b13e08b65c029f6cf8a29e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg90wCRA9TVsSAnZWagAAumMQAIiMWNCN/jKj2IiZtGST\n5RV11IepxRDv2o/GkLF6Xo1KbjdLkGvVennSnbQm0SmE5pcoLEgGtfzvhkRS\n9mTNObHIsTtehF3CnXemwPKq/g7rT+dVIGSvr/vtAK4mFyZXVQGpi8coCqHE\npljzueGwOj8GtIZb9lcGd0sdhRbFh1QQVdpn+vH+Rtkjsim7wq+Jiq+NAuAr\nb8WmTjsgFUVnGCbaSFcCA38Fyn2c76B8xBkNjTLzp64k2i9xKTX0gtdWBS9I\nboeClo34bIOgzejw6Elq78hC7wWu/9b8+3SaJ3DJ0tg8ASGaHXEISPDSOXzL\n9jA5m7rshDBIwiaKUA8VueBkmlypD42Kw7kIHhe6z8mz1+AKAQ/uhxMWmlc3\nQJ4CVke5G1EDlmAf8LBROvNS2ObOZe2tKOI4V77eyjbCd9497NaTxrPQuRpH\nyfCFTK//JhGwSU9f0I5V84sJYZyKUZClp9vQHgsk8GrVovOOJPpg9eKra5fj\nVAPEMpLFDcFqhtGMZAM41RbfbLP9UIryn50VDH+v4Wfr6jx5+GTLlPQCo1Pu\nh1t1MHeEYZquMIXEC57dajpQdGVqRxsLMGQRQRZFxIKIfTXYUPHhMcMK6dlz\nPKh8DE5r87a/ieyPyGwSLWqoEsl9D+wiobYAL70ScnvKdXdAQ7HQ5+OVVxNB\nm+Vt\r\n=ffxF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPmxhbxBNKgyoSWKEcn4o+PV2SPwsq87AP7wpMBcKW5AiEAjbXm1vXri+DJDI1jxgQKL0nuLP6X5bB+4mwTKeTdg9o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.9bd3e9e2.0_1585700143867_0.5015013543192381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.072084ab.0","@material/top-app-bar":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-j2ws+RLd0XJqiLx/xDz8/io5pvrneAvv0UyoQD8q2d4J8+qCOfEBH8NWVOgZSco6iBemIELpq5r2Kclmxz3Rkw==","shasum":"2de5d172a668061b01eca32775bf5d8d33f686e6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.072084ab.0.tgz","fileCount":20,"unpackedSize":81846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/uCRA9TVsSAnZWagAA964QAIQmoV1CECXnjhKErzth\nOn+AiCM6Hc396bbf+yzEcpB2yxHbMO9BycYdys7xQcCWdgHIK151lM+7DlkS\n2dvXxw9D5vDMOLJ5OuMwlPxWnjEFae9voVY/pWtnSO4oXRmYbzvCQjG0OobV\nZxhzKK4bzLXoHgxycVAWOV7k/KV/lFO2b9BMVsC4eng+g2hrl70WeQBc2q4L\n6FCbWAKOJEplyqShkWFzICpqH2lt4Q4P50/5UXPLZGbeD41hJq2DuOZeqPTK\nZ4NLsGXD/s5hCa1EwGaaF6J3hSdXTpY/Kj7bEwCCaHIqdGCXSkI3vTYpRQXZ\n/u0DNyP9jGkMH6Se1P6bTmxge5sr/QPIn2BDsK+Asuvr89VsluyROSH68Xw2\nRmrPAXkNCvZloEI5X4/K7S8JUqsJn/UhX6YMmKJya7QMARsXgwpK660vCgKX\n1aud67SwO17f3c00b4c2IBmMkb7cz6nw9ghFDM7KWQtUZptyRvM4zg6PhiBR\nFyBrnQle1c/KTRVfK+VXEoZ59IHZmGa41LsHWykimwithYHbmLKK7SuaRhbw\njybTAHPP+9cP3lCth7DpA+XAZL/srqGQbVIh+0RkwyoGe5trRvb1BRo5WD3E\nk/M9BMwJUXgFcL29W9h0lpXSRzDemRtiqqKnUl9LGKqiQAzD2dlneE6omYOg\n6BeY\r\n=Enns\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDy3OsWj7rkdDgVNnHLuviDBnsgXyjYRsYxGh6tLJjPPAIgLN9cLdS55hmPYOLhYXlmaJaBFOGDyRpmg92+sL9A68s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.072084ab.0_1585766382295_0.5609018356110043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/top-app-bar":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JAPqOr57Kiz6bKgfOT2FFABoVnySpg8rS/Mqudb1y2lZl3mdubc03iRjS2e3a2JFx0q/0ENZ3rEkx0bwRj5Pow==","shasum":"4cfb64ceb19a0ca730984f6c20d5d8a7bfaf27b8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.4dec04af.0.tgz","fileCount":20,"unpackedSize":81846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5yzCRA9TVsSAnZWagAAtKYP/RHY5rWto39nXFNqzAZN\ncqzGGWqVz2K8KfUWELQsl4ZMrIiOL7qn3mhMRb9zApsREq7gKt28SThnIrnE\nSiNvzaNZOV6L+R8Cyj2pQN1b9gwaogQN0Bj5HsoHrzLhO9JzCBsuvOqzGS9N\nQdMnRYjpbdxzhhci+eTj3NkLUAUg/6m8fjCTrBejfQDNCJXeyCYzj10Dg+rz\np0mXLqoHeBte8Tq04mpBIzxqo2WQC1N74NIvoBpgM17d1Ua5c1hQ6rvFKYHp\nWodzm1/hhFkPX7t7ASedX39uN2vwJJVrY3SXelebHdBdmUMLycl3v5DQ0wsE\nCUe5is4DNzRZb3h36d/9hsGZ5U2r0FLIRe32rXonO15VbH8pul1SaMbpExjM\nZJyrdmWTaCrEP+BA5ATvlpD5rCHY10dxWq1wDMjz75CxkB1z4gF4venNvTZV\nOKU8NIHBdPLS+JlnfCD6wE+NNKZJuYXzbVbfCwYxqy+0yPx7A/xtjVBmXzqE\ndCWCX4Tu/u/g4OtR6DOA8L/Rf6mtz9xHK69xL/j2PLnoYwHI0YllYym/nnQc\nGRtkSf7WzfNllquQFoTrEh+QWmwx4odZNIXG9zQ2cBcsJFsMx9DG7K9Mlx1b\nml4M6WUnR4X6jA/KQuVzxWydYhUaAIfXBzx+5MGT2/ykhPSDL3hYbNmmK6WI\nkxGL\r\n=+ZPX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2HcCp6YjXXu5cGjh/Quqlqk2jtYADl27qX6CNen32HAiEAjVard83RugQNnDHmLaRyPRJJVtktwEdK4GlXokmyvYM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.4dec04af.0_1585945778972_0.016411526282162248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b676354.0","@material/top-app-bar":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ydRLXJbODQQLL0CtJsNidqSquQK9hO7+JM6UiXPF468q/zzI3hFO2FA/UkdkFMpn8UwKt59c6kU7qm5fANVzHg==","shasum":"7100e339cd4d6c7449a895962d34b180c269010d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.9b676354.0.tgz","fileCount":20,"unpackedSize":81846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zECRA9TVsSAnZWagAAYbEP/AhCzUTkQrH/BOtl2FKd\nY19k5nBCVRhVJEGAvBlQfhgb2VWbr/jxrNNb+icN7QYEDqjKpZjw01tA0No7\nd8bI1I9iIWXMPtWGW5g/3wyEZjDQD1mDbQ1WUAB6EF60/LYFu4kWd7DBPDIQ\nKu9kzO+ExkE3RaBesHIUeVtkggSwi1HT89DLOXs5Bc1S5+QR0S1j5l9c2Rml\nsI8SFlXub6tvN9UOR2Zco0CpfdInvXD5G4Wb8ttgR7DgojrRoLtJzo4D2vTb\ndjFry7o9xBo1VdZS/tOVToyU877LwgwesP6QBcue8SHBJscZZkPf+8fNoRZp\nKTkPYud+qJF78+ZNJj9+tyE5QRHt7hj9Fcntd+KCHqmVGkuXfC6pwUy/Ctn7\nR0uI1//FiSK0lRQWFixDk4kBEKuyK4Yg4viYfGU32jb7zIYs71Ogj9MO6/Mm\n8Udiz/p0FsrZa7Tukq7Xz0iPFNSA6DAS6jpdFerJGDHhV98Jp6YLpxJrLEZV\n8a9YnE8N0QWtTNi+LzvuwO8Pph1KDaX5VdO7C/lE95MM5UcjcbMkrjq8VrR2\nPyBF+IGwiJlePRjLHNUhVeGDPu+0I9N6DcAPZ+Kw0No5D4z2Tip+1mwNKmCE\nUNQOZhh/3K9futS+2xxL2vvg5fIIVEiWJLa1MKotcTZA2SFsQT64dZnJxWhl\nfhtg\r\n=BA/7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCut/obRxOwBXKrEbQ0P5kwt9JGWT7MrLJ+C5k4j5toHQIgJwuW/81BtZGms63SFvE7wvOZ9FERQROnjgP+8dXSh4w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.9b676354.0_1585945795701_0.8988672581126562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.6b946095.0","@material/top-app-bar":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JAOgngRFW3fG+53X344WVGzTvZW1nLiYIluVQ1xCAF/Sz7SIIQeEcbrcGuNEV7R3/0F45hXbNuzN0b5NQ84bJg==","shasum":"c7893d514eebcedb390a5e6d8e85bb015f33bd04","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.6b946095.0.tgz","fileCount":20,"unpackedSize":81846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6l5CRA9TVsSAnZWagAAyaMP/jxg3FOOozThmrxWInD8\neO6ywAaJodeV6seWyILg47gsfdL6TvUNVP8KZePbBg1pnhLkJ6DXWr6oJkfq\nrU6RZiUYIbbguJqKpBKHs8OPa707bV2xyZkwRYGQxI/rLU3oncg6EilPszzc\nc/2xtboI8Bc//I4KmDfCkflxeeHHwCW9RCqAXopRv1O8xRHJGs9XPu/gGfFr\n1y8r5tjMQkNTVJWxpypun9CmVhrTYjC0g2lJItnxAACdzs1Wkqi8yK+Mmdc5\nNnyrdRMFbF/dAPkmyrnb5qbsqvVfmPgVbGnFfVfEESIystuzss/VUZL37ePK\nfgC53UFp375c9/x9kTWb1cw9YwLKo3ILJoDs73YbPImAGODLAyE4IngJi7r5\nw2Stec13ptIYqcx7z1BOw0ltq5pI7Fq4wHhPEIG2qeIR8PmhFVcT9PnKujZD\nJgbN9f6qN5Xn788hyp7XqcFZdtryV5zsaCZtQsofwDKO3VvI+rhQDTdp0mCs\nrb9We8SFfK4fkuwubg36e2BeebgDeMIkQZh1jpC1XHYlNUMnAATBU/oqBeFa\nxMjJfB6YT4h5++yrShiv0CT18V4OfWyWB9Q+SN2AmOXVme0SnPoZOUzEcvD5\nUMlb2/E4kY7CK62PKinbqlyGPp2pWRzCfrx4lI9dbQzzjMKU68bS5orUlrcj\nDbL3\r\n=FGKt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIlulcFNRdSq9LfxmacDBG/rdF9uCttJdNVxRNQNMJdwIhANwMrlbQE+Oga28D+cUiHyYnP+NXQhghiLpKmtwAsrVj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.6b946095.0_1585949048595_0.12633144049397327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EuYDAHk2xtUz27JZF85zsdGxJFatWj970NoBaaihapCRjCfUt4fNQ7jHnk5glHAW5Tq9VkCTUhpoML+uIJkHrw==","shasum":"ea1593e5addd2b273e25426b3f07574fb9fbd227","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rCCRA9TVsSAnZWagAANK0P/jr9pVjhq/j2P/AA7QFn\nURz7hXMBmAF5E6ZgGc5On1Fl7ruzf0jpYKHlmrJprfXVFD6AXCPf76uCqwsn\nowyzMzrDqYnH1ri8PNRZ7HYsSfY+yOvfhCn+1jPcwLkiJwXirWe713X7tzSy\noh5eP/Vnn9DcbDOy5BheZ3/UdG9WHhf75TRjOf+PZ9RlsNsOjkxjoX4FTt64\nPsKfCwFshdQUT7BTgs81ISZg59c5ABjOWcwej53jWE8MMJeZLiU7HefXKNU/\n1YaAKq439vAUbZQNDenkUcTraRv+QrgfFfW57NmR7QBz18kmCfDVoBTaC/q4\nDUsQfyvWfSGw7WIEogzxVIv5pvPp/6DNkRaTNNERnP73YSvk5T90z4L+R4WO\n6U6SFgXNwGZPx0qYXJPnOzZRba79chVe2GTtl3/WGhGViTUWNPenXUopftC7\n8VjvjEdZbiZCO9uj9v1B9W/5+5jm47Ljb+neLZDVNc43w1e6C9RaDNPdmo2m\nhLcF4xhKA+LkP2ekSwzmj7jV+WkazNZuNSnTZjnnFuA7OAtAfJ2tbW/liWTj\nQw+LHH3Cr8Ixg1jeLv7Lq/bTTZB029KoYksnYjS0X8pEfIHIIIP0HQzln4U+\nB/ibP71HZXE6hedws5tiRny38mCCueUqKQo07S1y2Zo1F+aKYwM5Q+WX1e1Q\n/MTJ\r\n=MkMb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkr4V5zU092yEpDcJYfoJkCg2fwAq9RULd/uwkcsUsYAIgA0Bm3HEUBnUGhv/EjqhlhZ1WgzGHQXHd88khy7UhbDg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.5ccbfaa2.0_1585949377965_0.9045643485849444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UlF+ii3q5HutxTMBaTcGqq7BI9B3YkRMcBsS2sfSgoasTQks/QZUKEylRz7qHrYpdVimDTX3BbBfsnDbfEpDxQ==","shasum":"aa5f4c2983887435be264845183a6498083790d8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.a0ab8772.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3SCRA9TVsSAnZWagAANXoP/1jtRboEvedsoLPFvk98\n7nkJwiUZeafQhN/ykja5QJDiPbsWeJF3jkLWeAZLBylXIYoy9ROhkcN2tGnP\nEzPWlgH+7BnjCKFsyleznWJB+S8ic6OYUCQlcSXZeEbguVKVF/JC35qo0Xeo\n1VGLuu0OrbEPbfF7Vdtjbatg3X2/XBamBR6KuhWDwx4w3Dcu96QJecHzpAGO\nXAJfcByqS3rnxfUwHtu1L8FcE47EybIB4I0h6ra3hcEmkKEYmU7mbPZz3KLT\nyWgEcHd5J34NNgc3vnYbDNLy0XOZQO8Hrorg2ti3YBi6GIG5EIROqXbmq6vt\nkowqC3TPUVbrbWbPhVXZuEs4h4RY2LbXDoYVvuDe3OGbt/eGQpKp7NysT+zf\n8oYjzZorSEOM6LTDYbVZciiQdFZEeahoJZIv37KXf90ghDgeNdo3ZSrQLxBl\n/5V1zq4OQ2/goHyO2AIJWuzeLIy7qvaKevbhHYJmKgqK5Vmsqlu8itdwhnAM\n6iTGnNh5djA1mP8Or1PZoztRdeagiayAY8wsFfLO5kVrmb1K8zJwKd66iEKL\n4h/NvN1k1QmiOu17ZCxjyNHKoH8HU2zKprY1bunmZkSuZSD3Dsu/5i31c5nB\n6YI8kH9Czf4Dd/EEnSoyVQJ2p/Am6RLEJ8b6UUzKam5XXs+QnEN/v9C7cJHr\nX+bw\r\n=hIjO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvesfCwW/bWQreMz6MuvbnNiHjkvRidEMO6k/zJODIcQIhAOxFXFZ86H08xqy4nMfa1NLHjcxlAiqbL2e1dCFs9xzn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.a0ab8772.0_1586290129810_0.46050702242743524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8d352305.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6UAvLjXAQYo8LXOG9U7UY4m4O5dxDGPfwDm1xyT011E6iFKcv8s+5siIZAFuH2qgj4zx8+iuDAyFtGimPA5WVw==","shasum":"c6a238fbd3a82a22ac66b16beaf61a4a9aa13d6e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.8d352305.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOlCRA9TVsSAnZWagAAIr0P/jBK3vegLzldHNlmouAk\nPwExIjbAmu8SWI/N9M60iPsTyhoJtb4Pi6M1I+cN3HUQQp9q6Edy5njSN4Dj\nzsET66zwNWZDzyPj5dKGHCg91tuLC8LhwjmoDT9gjuAUReA0NzWjrIhv5DWo\nibqwFeuQttKVfJBpFkDxyqFxTsJQt68UiEZW6ki5RS/LsiFX9ohyoFvq5ddy\nDgSJWqmzN7+5tvkVy7Vk1xThaiMD9oMRfoYwGMNhPjtF26m0T8JPvaExzmpb\ngptfPQd9qo8zLfShA9txv1TBtCYtTTuwPIdC3wFm8wMqizisJesGqCu9K98A\nTImaHuokxm7TH/Qug9YmCRTA5CMVZFethG8NpTRHU+lElCG5VIUgguflkYpE\nBDj3MnLv7nKdi1NazttAcwEC6GgNEG8BXRll0n50G/lhvdNdA1AlMwjmYI97\nZf88y9mNspOqopUQJtEDjV6Q6quDlXPHTQXbkDB65pUgufQQR6n6IhGw/4+7\nBSrchv4P6Y99x1Vj38YuwaIhYbwakRtTDh1IThkDKj5oa9rIEcMuc1cK4JJw\n8yZ174lep6buHV/hhmcUsp3QMBhekLB68IHuY0JkA1+0ag7f6XR1HvHpFUon\nIOjUl/WxCAUIsK1fcyax6rxpHgnvn+ZYxXXKEtA9oHGs8rr1q+4OGUTpuUxl\njVK2\r\n=ZH6W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFg+YO2xXSYHsBsZX2byOLhr2z9z69q6kukktbppuNfOAiAHWGM+nLNgPmMfyj6s0C4hakU4GfBJ1gseGkLtFDQeHg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.8d352305.0_1586295716707_0.8488314528883771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ujNqKkkaCxnnVcjrDMeoUUwqufNYxkY6X/mcbhCnR7mOn+wPBpTgsXHATzloV5HSrE/YfyHy/OQkWfivfAlj/Q==","shasum":"1c229c39190c14c09ddb6ec1b6a29153d02cf169","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.31eac79f.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdDCRA9TVsSAnZWagAAjtEP/3tPcKEYwy5Tse7Kcj12\nnMyUWGiMiKWvYfOFIsOK3dIxK283ez3hoC1O7IBx80EnXSUZRpn0QRUSbP3Q\nT8MzxTprKHUp4RrihaEzMvcL18G/uWKChzWRtkLTGKFvlZCdNB2w8aGSXuAv\nCPgSDbvTekN/FeE7BUxJj2Aoy25aME4mmz5HPaVYzcv4aPruYZ9Vf3SwuQKw\nmswXJNDOei0aubAq90o5nlE97MNm+IK9JYlrB8StM2b1J0GPMOLq//9I3sB6\ngK5cJUc7XGeYqET3V0JNzd4idZ+LxKFNrQAsSLJMClVESp8R97wsdDYBYWa6\ntZhTGIwLi6pDVCVOtrQK/mGf7HpS8R+EHxhjj6yXdxOBm6MubyUosjSGQb9+\nMisCNfQZAa7kZioQkI/9/c3yPi3sKB5WXwXslUDQQnYv5NgcXtXg/BmKoNah\nWs2czy9k/KXc1ZQPqU2uoN21GBwF/YyrJgRokm5/hZ6sY8OCiY4qgl65TIV1\nMMXqp5gfGN3fmpprnOqzICXUDzEbEYZ3JoQwJLIdwoT9bhgxOWN5hkLdDnaR\nCzS2FJZg+fZb6bKQPVAGL9letQ8ye8nwv6XYJ4mDam5CIm/AAMQkeaK2RWgO\nKLEUj/AB02oT1GeihJPnL7czUT4iFZFbGHG8c+yZOliFfW6mIyiORih7dmW3\nDAZf\r\n=AoB0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDrR1GFF9mqhdxZx0FPyc9NBRLcZFrYUnvauHYh23/wbAiEAllbpj57TC7K/xWPw7HmgqSGkCwdMaeS0VdYCi1MNLOc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.31eac79f.0_1586296643263_0.765737186074757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-77v5c/9Yb2UrtV30j1c2ov+Qho+NOCYreDZ/ByMa0h5eWOIEhyZ+JTMfs76iFNNnT/yyCWVZbKj7FfnnxssneA==","shasum":"c1fd42d26dbf5882a3f3ec412282e81300304273","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.ba05565e.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqsCRA9TVsSAnZWagAA9gUP/RgxEgX6bMnsaiHw1CZh\nXFq69gma0ISgppQdFnP7w+yyT79AV0s2f0DonyS9vdILeUym3TqLRUYOBEEz\nCeUi4YSwtALM8uaG+oyqs38ls48BzFL719E6vNMY7pEjS3ES6ucWWkh2MP1Q\n7dsgh9WksyRIb4jAe7HbKYaQhhic+T3dTSn7+mk5GNgMTXAcLOnQPNqoavtq\n3aJzf4G2WXz8XJpwOiiFaY/mcYRiBowp/pz7igl5780qI8ZqNEFQTB9DiqYp\nBOJ8/VvbuC2M6oucqygZJ6f+iuH9K4TjiZ0oHXoEgkWT3rJdSIWEYGRnHlfy\niP5/0SMkBSJxHtCImAANLs1xQzUTfYfxicRzGfA4aIuEzEGEt+eQiMJBm936\nBjCKmi9xV/jML0AYEiZYiPFCf4LvKh/7ycBEH9dJ93Rc2chFXZ46P34xH30f\npfr1g3JukFdINrM/7daafu0lLq7QnN/QDWxH6ktdRsfgqPhTOsvGOt1c8/KH\nTxMKCwUmZ27myIoGeoGw3eLPMLjnl9KwTmP1SpCnzh1E3S6wEJk3lNcaYC1C\nLCWjsiruGjOT3vsOIH/mo4m2vnxgl+z7DN11ici8uCYZOblh6NvrKvxRwbdO\nrM+hpKVCBqbO7vwkMLD6ts0CuZdJDB/y8sMEPT1+NwhkLl5X45QbWUr6U0cM\nrVNq\r\n=avEu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGw41I0DJk+V4dz5N77tts4aqPVyQZmZo9hrY59vzuu0AiEAkVThWktXn6Vd8vUTBGl/efme1ChAQ7q6pvKOicBjVQ0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.ba05565e.0_1586367147866_0.3021036014044378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.25099f79.0","@material/top-app-bar":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-Q+kQsKKSIj8raCRAH8NHcEmq+mXSeq4FsueU5aPtZRxzafdVItQzp9HyrJQoaxrXX6CvXeDMco2aouRfS6i61g==","shasum":"51a83f7f243c64a3b910797fb58dbdca03c00c8b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.25099f79.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkJ9CRA9TVsSAnZWagAAxCIQAKHQxqaVkMIj8djQGpgX\npf00Y9YKEuHLkzYWn+AcadkckQ2QELEKRQrDbW+xab6IT+BRkOtzEwg4tJAy\noT2/3hohISFvXdM6w+nZb74JRVlW8T6oqkZbD473wqtkG7iWwS3gCqoKxIJN\n+/2NK0QNdZ+AD1ugKGp78r1NDn9pAUhnMvpsuXIQ13N8F/f5DTjB/LGkGuOQ\nH9eMXvc0Ddtar3u1DGtpSWE20p4x1vaiZfRyCpBHhyHzWTyTIMD3GrZ2zH2p\njp6O0Hr4JKrJ8CR6cTj30E++WP+ugSJdoM+L0A16sZe9ZXU862qNYyz60ILa\nyPFCBO4X6CqrnAsJ3xhQqKrHAKsINKx9FIx1gFhpIcoV8lJHfCgInzbh/WKh\nydJ+GknnT+2ZLA8jYwNjAwijoybRVtaNHXE/A68FQTOcM8reeFefUnMYmpT6\n+tLEk64OWWWvOLgAtSGb0VMp4J5aRE45gwABuoRzAVg4fhKPgmfOU11Ppu+e\nbMRQeYBJ/DnRc/rfjS4xXV2FbSSkNmHnfGz06K2EaxdAhM0nUBF2f86AjfjA\nUBic3SckaZ2OiJ9kaD+s4qhmxSdokmpOO0fJhbwUuryOwCMpGXyWnEjQrsft\nELmUsrXGPV5202f/uu5V6c2XzWj0m/PzivG1dbwoTl5sVtH3oCdEWxvGYPHC\ncX8p\r\n=0L1K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETbsEMChCwOAO41RLQdvaNuak5EUjPjmjI54vNoYPuqAiEA6m2UOBCcrVyWtSwnSQAoqaJyfpVTwJ6ePVt8qGjkhqk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.25099f79.0_1586381436988_0.9269629593798174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/top-app-bar":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-uBe10EKxiPpoM6F35pcs9D0bX+9z6JBo0l/oEzHVUc7isUCrYnqCqab+kQE1ozD97Ud2THidDJSOOHWlZ6xzJQ==","shasum":"dd5e2bc6838e5cc60d5842e0861ade8df1b2dd4f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.447e31c6.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndsCRA9TVsSAnZWagAAcyMP/iiHYPt3lgW9nw120JqE\ngeLl7cZjDfK6XdYW0z02it3TbgYN4sxnVmdikGHLlq/kcVLBJSrUW+n8aFt7\n6S3S+MqHCZYsq7ZOmLKQgNS5QiNQJi44/i9efcrY94CH4QAiU7OIe2fel5Bl\nTqh1zzyO8RPtVj5a643B+2abyTgRWhmH+x5AxnBqCKQWxne4Y++0ZcYudL4+\nNz5avz+ihxjvuGskwqWLrsYdWcT9u+M4z5pMdWTPxnJKGjcdDsf8buC3Uptr\n7QEMbzc0uqyUfFVFjGZAnXVccfKibgOR0D4DAfAA+btvRr5SBJeshJIXhznk\nrjFQIMlC+AoqCDKW0zYeVdbNIOa/Z48miQqfMx8GkPffMxR48CQ1AQKsHAUA\nIlDgZ6ALYCa107xwsW02XrRVcax0bpQZy2bn3ATd4ZC5d+EwHoRgKgZLOO45\nd4IZu20hx+Ixh4a0SGe+hV17u//L5zSE6/rgH2rpOkxfziokczuX6JeAEXC7\ndJ/m8k98lIs8b3v5mvFwW/GehlUqOrA/gMWzfPK5ufzyR9J8uCu1Rhqy2zMI\nuZtA0awtJ2ptaHZla167h6U4Q2AIqT0+LynGSSf2Ft2zld529bhHgcmL2oTz\nu8DyMbYlycGguAaCn4Z88Buh8doOy5m9GO6v30LPFdnpsCX+ZvuOyKRyvCgr\nEZvn\r\n=ZNzq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC549T0UpVKXae89OafUYp6wazw50UT4nlG9oYPLfMTFAIhAKYNzInqIyDonrxnrwh0vixcf+sHgz+ndeFK1QheQyeJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.447e31c6.0_1586394988099_0.31826630281475055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/top-app-bar":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-UWpuwIUkK30d8/dqXZWIiXhGWPznsiknGRwfG22FYUSxP8ng5vyI+tBB7XVpWEa2OUufLPazqP1qjuvvzEilCg==","shasum":"59bbe027f332bda0a22435633de48f9bad72b84a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.d6dd84f7.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnlxCRA9TVsSAnZWagAA7/QP/jDhrWUxbv/mu9pVIh4y\n4S+pE9LFjbNIjotIQZVYvxvocO1Zv5f/TE2rMRBhcD3+qDbwn9myBABBwDvV\n20/XJm3clDEptqx2qPezHT2tdotMGw7b5JwtcNAj4wfrHrcrJ3oHsWaGTrYe\nyjm5nCl9enQqFWvzMTivsdCOwHfGPFS7KRE5ZWPRM9y6D65uc0W6CUrbCIob\noEAgNKuBGcIjSRtg6ldoPX/n1BiH1Riuhpfb2izGdrULi+AOveZYB/PFwLiH\njap8eqUNL3xqptYW2A3j+j1IAjUTKBXGup38w3ua3nhkipnsT8QTge3oP5tP\ntnRLUeWG5Zmo+UKfj5Bp3u/RggUM97Zts0trvbb6I2hz+/rMaNmT5fDCffqU\nvV7iQC44m5mJHcCDsmbHAHkesAehGw1kujG6TihwRuWzKGpyzHfJ95byZhxY\nMxet/XmfUUPEELfSN6nWSo1AtCsCHi8/lv9V3F4CPHhxc7qnpthj6T97KAye\nJt5kbzFtnX/FWYfp6j9T9WC4ZhblFoDfPaBkXnGhcY8gwARUh/tO1wF7nNr8\na7QFBpbxIzfJGqwNQAnUfBOR0q6qtjBID+4dUHgAgWpr8AZeQbZFVbLzShXJ\ngP+XW4uVW2lU2l3mdTe15KOvDsL/WsWzEjMjwYrtfEcLsnzHcS3WaBfb+k3W\nXhfi\r\n=mBcr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF31RhjDFUjOAF9sjNbji17AiLPiAtkLX9bjvY3tui2iAiEA1OTgKJ+S7C/ColRv9dvZxKvoiT8XBboQMZ5Pl9KScZw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.d6dd84f7.0_1586395505412_0.7178408394122213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/top-app-bar":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-h5sPjAED6AyyIjAdCygKf1YXi8HohzdlUBD6su0HMciDLCiuG4tFhLvo2ACitK2y34F7CLLVP2KO/LxhGRD8tg==","shasum":"16c5e9f57b81ddc3cdc9dfd3cbcfd6b115b76cc0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.9b03ee68.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39nCRA9TVsSAnZWagAAC8gQAI+XTPQ9eyH6Yh4s/18s\nHZnS9eAlgJba53gibn1gpx3s19Z1BIbL9H4dI7RfCs1V+gXruVJ+Un7/QzvR\nqXjjrMszwR+Gasl65nkqvox+u36gJiGWZeksX2/LlKOnEBVlRH0cJp+HknOC\nQg5UGngr98ua+6al7nS5XjyBsJCvIK0ylsu/WQAc6yThjbOdamnpFiAroaZD\n/LMN2cD/Q4UkIMjncF4Dg1QuPydn1sNg/oLvPqtsBwUUSKM2tGDe+Hg8b3Gn\ndJXVY1+4QVBNveEwGCeBhLSjduthc1Vq5SYuRKqfMbdb5w0Mqb+aitiO/o9o\nrb+r6V12KrViIZWgFJSE2wHmyb+by/nmSaSb9OjFdMCXdd1bBVcEE65vBJYM\ngYTLudTdLm0f8WiaZlct7rLce+UyZVPa5uoMX8bo/freF4oGfQnb8WDGB8Bz\nR2uhYLb8mRlEYwlxlQqswJp1vHz68pGbYPi2T/bSfJ/6XBviMVqlolkfjB/y\n5I05e/T56KDMJC63hlpygzVc5F/TCbK84ktkrcrJTL2nAaTZgSUNwzqHEwUC\nwl0TQQDDWfbj8AdQjQGWImDnw6iNjsLe5/iyX9kVOGSOMYXnPDfXi9l7OPU4\nZHx4i402J0E3r2y291JulNgFHQvl778F2iS1vDVMSuzaodiy4/ftLykK5fM3\nMO/o\r\n=NpVm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6qjDSDxEvGGQRawXguHgggd+moIQAjIOuN0DexG62DgIgYVSzsPdVGjp+sk9ydiFyli1DqAltiJBSkPdi0QTrzKA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.9b03ee68.0_1586462567416_0.04199136788286961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/top-app-bar":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-EiSbKAeoZrwOXM+ItLqbDSBiM5z4HxnmL+FJ2UVHctyYokPwg7U5CANmQO3dmWuBFRFirwoTpfbUPigixjFYPQ==","shasum":"44227dfdba3dd072ea1eaa7bf9189864e6ea5725","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.bbc25b10.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcLCRA9TVsSAnZWagAAtSEP/1341nZUeuMLuj8ZzKzd\nJGADgpo6CQurPi2rkCzg6zrUBHIbYM3QsefIhbIXEUmICdlZMyVd4uK562vU\nktg4hk2PudRM42Nq2vIDzQVFMOHa+Ta6Gid6dotT6tfxwoauJ95gnGsck4b2\nW+UnfJ0/3t7Dxiip4bBIU/Kw3NoWgvD56KnaUPZSSppOwJePmm/u77NFNh8X\nzOrkOBtCvjAgmKbFr3X0fQn/62oa5mKYGwyjPu1nc6Aa8HJ+Gc9xhjPIDIsK\n46xud/p5yGUzRb80wlKUYey/XouZ1N2fGOPm7TltphEgtSaIKl2qhJQqrdXU\nW/d6YiQTagdvmWbruQIcLoERTNiJztJuJPuwm7UKqaaUrT964mNahXEFIKxA\nru+f1tHr+cR8vPSIDlgctQmXMAtG1MZ7zR5jxJisisSAKWofT5Y0H8YvvURs\nou/WEwohVpVAYOw70nXdNrinwVaOeSwrjSIbeUatlwzgVYG1GsIHY1E0PI7S\n2C4HFHhJ45g/oiTSgl72l2t9x5ED3VWlGnqiWa6HqDVSvMmcpKhtTdS9sHCy\nlKBGo5foy9Jn79ioc8pNakHpTJJKrlgprn+zZI/3MhwSv6GmEFG8KHICTGv2\nwgD4tkSVVPEj6BTzZ8NmMYzw6EREqXXRn8zL6f9jYuM24V8oas4DWe2o+zR5\nijoA\r\n=fVHe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqx0NYY/d/gf7YcO1yZsYYSOltjZJkuGoG3KpiN+j+6AIhANb/yDdM0GahfFYoTRK0unqItdZUPjIR89DFucTSaQe1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.bbc25b10.0_1586558731469_0.9808246346846943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/top-app-bar":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/bX1BoXfPxcKHQoXt2OT4mQxMv8/rObdliuE9WmlCmTwxEJ+n5jtRVV16w1F6A1JrUv0ejzOf1NvZcxXMIyRkw==","shasum":"b1a1eee42c1922c6a8b77382d4c633195f1da19a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.339cbfd4.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0afCRA9TVsSAnZWagAAztsQAJnNR61I9WrnJJmUppKk\nWa7JaLlDdFUtnJUfMB3xUE96sSrEZMFJPIdwI2EsuSec/L1D68EGHdWMzgcp\nRqgut41x1G6R9dLjRiHp0hswXoqjvvk8p/MJAAkogIWutM3AcMSfMJ28PARV\n7rbnEKE0DnZvyIa4Tgk8/RLS4kkDWKfx/VlpTdTjKH1SGkCIQC8O0iBQGyKs\ny60Fsn35qRQGeftPhndnPPUyxw+IUr4ka+8N4RBarzSx2cMi2o84pRQuGph1\nRVrdrUK0PnAGZ6NRGqIuszATosXDVpbLtb/2AbRel2xwJ7y4tJeS4qjwSP/3\nSr77qNTKkaJB/Ot3E62FPJowi1/Lt0cmIC3Ka07E/mDPG9pgJYXxIxHG4JRZ\nrnrVwTD+waAow/7kBTzBfub6+EqjUqSZzrILlK7WJpONqACqUM6xnLM1D7n+\nYJ34msPUt6Lq9fvcsTJ3iffSghiKOY8rrGabz9l2ilZxC+N3z2V2HRb9Xnu7\nNjQmYj+NL1InaQs3Rj9cMrdcx9LbWAgxngOEEycFOxsM2bae9Px6clo2/mpt\nfp4IsxG0I9jiRpdsCKSzmwnK4pfnfpLhB3HVfBJ9mUY7v/LKK6B2BURc865u\niBm0tXg39xLqG2zXdurQ/y1q7qIuQknnQsv3N0f7iJcpK0l5QuoPG9+3yN3v\nFcWX\r\n=6OnS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkiefI4YQtL3asrx2mB1T7fpX/PvkvGbgsRytnowqzMQIgWAS48jZNET7FklRgTNMWihEFeiWzH98Kv7QV7s1CCmY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.339cbfd4.0_1586972319344_0.4591295772120054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/top-app-bar":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hmHaGveU+zCAox/d3VrubeU5Z+GAp8OVJxcVfn7dC8xoG6wzRNitpePN5CGBdwBfZEQmiqMlLa4tQVFDrajo2A==","shasum":"529d87d0c8acd2aa6f2d5a8ac2b3130a1345a1e0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.b74ff19f.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2i9CRA9TVsSAnZWagAAKKwP/jgfNqfQCvsbA4sIBCgr\nSs7eqLFc+oEfAx5eMWZ+8YwG3I7KALXu+VGAkOudGfxQ/lLy5aXq4HeZsjer\nuDkqorEI9uVOxGbL39WGr+7jTPW32drl6szsi+Re7R2v8WXPleF0K6nivSOT\nG+2SvILdwwiZaPsW1aQHm11MFt9n6L+2pZ0k+ZX7DgPIJhwLpK1XAksnpRyN\nRJSOmbg3w+PsA/mKeDT+EhWUPYjmp01no6gjBc3kU58V853CYyWdt4XFJmYI\nnlqPuxFZ7YazX4vyFaA//huFMJnRXatSjaaC6TqYaQwwfwperJuEpqx97Lh2\nJWKGyWN3CKXYK5+0edPlLzM5lkRIox3l91XHg+3xieErY/iVOsjYsWp5U6pm\nkXNTf26sPoqHcg1I2Xn4mOMyBAbmr86lFID5uOT8UXjUje5cU0AE3qr28UCo\ndgTNBzsUr+CuUFybIW9KzRl69Gu0/jFhBNMVyZvb0+G+hUu9RZ7KSxsTLvi1\nTKZAYa6tllxe9/6WW1vrst3rqoUJrbCRWGF9YLiCgv4DssQcinlVL0Qt36bF\nfCYhfqFkROlJNLpGjk7STQYWTxZg1lpsbZQ1tRSewJz670IPg6h7LN14W/vU\npv6LrNLsUMHzRmkgxSchimuIVg2l+T6fj/z3NWEZPAZ6eLmuOcYdsGRY6DeW\ncdL9\r\n=h6Js\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQurNyQyjNtAnRfBzeca9LBET2jY8eVxZBjQ1KgvfSTAiEA4NJKxQavTe1DXbID26qCv/1bmyYVLP2XlhuYHnpqlIY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.b74ff19f.0_1586981053294_0.06526149136592352"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/top-app-bar":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Z9WaI/eDXF0ClI3c7F67OlnmNM8duXqdWcQsCSZS8K8Ly/ZEuZfAKkIjXrwj0r46UkhxTzE/wfv+AtDjlNSsdQ==","shasum":"20286d7d615bb2f98c4f630d6f40193efa69612f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.aaa16853.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel416CRA9TVsSAnZWagAApi8P/jWd6fb5yU0h5h5GjkAK\np84irKJDNfE6iKbbtI/5C6jN1eUqU7xz+eQS9evVDqfjT4w1Hv5lxZNB2wYA\na/kgwsgeBFV8ycA6BHVtL5zVx8PwwlPa1FJTtCrpQbpeGuIOMwTBgjbwLxt2\nsl9R/S84QshcR03WebdQ/X/hQ/PHNR9f6pYt19rJ6UbXqWOrNhpi4uBXRfPt\nheUkMTish2utYnEmv5DrOeBeyQve38IOvIePZtai0enXLwL+wiQvLFprL6pL\nFU2LBQ+cE26cJzbPu5epHq/+WJ93rI7SK2ne2pNLm5EHR5VuH7WEEtlR+9DC\nc/dIBlUjF/fRjDKTiw2i9sYCMCwYqvVlrw1I3w7lmUgYgSj5z8d6vOk2EODR\nphcgTpUBIZgVyovcG3yLszakPF18/TCva8bWjIn+JSjyWdcvDwcXf4B103zS\nRDWB3TJyPrmi/b4Rd9sDAhcKaf6RHu8ycEYLecW9QbdJVXhDvjUJPBqivzSo\nkc7SkmZE66A0E4RainfBypdihTa0JOpNV/ilE89LIuRveWk+3r0hOvjM7Ujt\nlzmsJJMvYPKomCx8kcf34IXkSdQBtUgH5HX5sNbmSuLklZ5f2ul3IJZ63qXD\n5sbldnHj3f8cCJvIYkfURRKeoYSa5KBkjwxx5QF/xglRvOE2SiqlEMcyHEfn\nXW5U\r\n=phEw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBH4r/qyXve07jRYYWZMbsJxtuUOriev9ivqO4q9G+3/AiAHhYzPSxPgXyUSgK/if9boV/qVUGgKySROh6B9+XM9Ag=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.aaa16853.0_1586990457654_0.1926778151337758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/top-app-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bvEPZY4MrEw5RVZrev4Nljhn61A5DsxoFlzP3/fQjVJOnPjvQRdNmGVeQtkJHQWH/9hTtq/DaRC7DyjQqgjkPA==","shasum":"c14e5cdb59aa73e1c428ed59baefca8b834bd498","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.826b23e7.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKp6CRA9TVsSAnZWagAAa6AP/jekj9OCK1OUX6nyNp+N\nzx+IWfjoWDO7ImVMQW80tZEs4/tf805aN3gLctSN4kIPmQPXkKu2KXcFLBTO\nPvp9atTn0Zwd0MYRtmZjmpEMfgtFkCii2LokFGhsq0GmVsBvdmkcVAef8aFC\nhJmWvpnV+EGez39602aWiO+K/xFbtT597cTGmhgBlI3qKA2OIY6DO9LNPLOL\nks8hIMM+yDBERoo4jtrg2hIOIdr7ynOXSlBU6zJ6+BbvsWaL+3PCMiJQEw2m\nWWHmDf7d2Dpl9ow1JKm8ww9MZEskB4b12oC8r+XOwjmg1xeJmNXDfKNfeSAZ\n7pHSWTuvXTx1dqnGCr5+CkXWj0Vu5oGo3Wi3FTuLa4QvxsxBGmxACBFioIhx\nol/CFfzbmO4nhr6Fv/4Tqml8XcZpnOla5/0uIb6K+1EFujy11pq0P00UVDrn\nmRtX2BwoqQ++UJfWx+pftumHTsdR1qK7y5Di+ev3XDtFwsrvD4YzwdR18cF3\n3Y5DAImma2wUAe9keNLrhi4aNU2Kn8My09dQoaWy46V5LJ3I6aE+PmjdKS9E\nhGpeARrWghnqCBDlNODrRJzFQpdn0IduBJxPatH7T35J88Vsa+m+cxmXGsFY\nBBp8JQ6BIOTWowWg/ap+n+QNj2TGZqdSajDkYlb1xJ/6/anWGgJfkxbzDtLS\nPwu0\r\n=fYIb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+uYnX4+0wfp0lPZE3YMrzAJdiSNQFvjfLOdCcGdzArQIhALyhathhunLbOfX4M8lR7rXjF68mltk2WWJ8DeQAVno+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.826b23e7.0_1587063417850_0.9244738754289343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/top-app-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-C4iXpUx9xLQza19XSf7WWOXdF05du3y2trYmkHtVeVwPXi4NpeD3vk0lLWBm7VJCSuISQof5UyuNMUF7xwEPkA==","shasum":"71f80c6003ab90e966d636a45021e16a098b8e61","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVECRA9TVsSAnZWagAAy5wQAISHEp4d05fmQWgIaijU\nS52Ddz1PS25eaiM94VgetqbdBLmABryKbe4zk3pf4adJca/zW3qgSIplhZA7\nLeKsv7hA+9kjbhrL/JuxFq/ZoTsOkVDIJjLqJ3zhxB3pOjnq6a8CNYpzT/8z\nsjn7T9n5ZYrr8C/tVKnG8OMVYLzAygWI+7piTB6vESuqw9apiWxrJLPtSCkX\nehmSL5deZZXK9+FxynO59P5W9lBmh14kvl9qaZFB2QgoOj0ZP3uvZXl+O9yB\nh0BK4A4a/NuVgKJLZz2MFw+IKEJKShKk8llF/qy3M9L5uRqCejAY3HkqjySj\ng/5ga1NKE0hLSeRD0uhN47J4YVyhmN5pztI8a6Eu/JKYWQfJP7fW/n6J6FUf\nUms/k50qqRSy0W61artRM4I+1mos4AlSJNX563ukh0T1sY246vCxP8KJjrCF\n+gtVTGNz0vcSljW+WzjuNCHG4b3EhbwMARZKyRGU4in+CE4p/EDT0CARPszd\nXDG/a+S5eczTiPkyqSO8Cbxadqhp0cDJLTPJhSrrUiDmphB35vHvEsGBh2/9\nQD3LDC5kcUJbcoyH3lmwWPh0JqAX7P+J3RAQD6s99PVE3lRBgE/zN6ununJa\ns4qV0I3GmuRkcC8o7CJUxIebpffSy3mUx9RWoP1ujuFXkss9EbJELSazypi2\nbaB0\r\n=n4+q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAontAegrVZmXHU70PARrVwuVU7NM09Gu2ZUx9nitGMMAiEA1T5Ox0AYTTJIKjiCgiu2m4N+Sznqg7/kKARN1Oa9PD4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.e1ad2b2f.0_1587164483916_0.7128697247850231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bade5580.0","@material/top-app-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EvmNJE5EVhaicvQRZWSmHQXBOwOzxD0ac9xwZ5XbgIxfac25SxrrucY/6crhgqo52Ej6cOfvaZCCoEnufCdMBA==","shasum":"f6f05ca84d71a1b8ee1bc5888f7caacf4dac8bf6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.bade5580.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjlxCRA9TVsSAnZWagAADWEQAIn3idojJEngEStBArtQ\n1UpJbZrKdJ/OZcbpvQ52MyPI1FsTkD/OyXGQSM3PrbwhxPZZHGXk+O9EqHQP\n3O3ObSzpjy3jEAWOVyz9kY+HDeS/A9ZOSF3Pzd2j9CRXPhRBGVErlTia33IZ\ncs3NpYRqb/L3aDq4mSSfTll/Pavj7P0FjFBiKzqvoqr7rrQfyB4PeVMUQRIs\n4oaniNIKEZgC78raX3rc/rEXmnOi86Zn3lBsn/7qt6Sdwk6oxR1zQ0bO/hRI\nprcwBoVcCAa9Jm6F/AttZx3RVVWN3hqngGVyaxfI/j7SMi/TrG4Mbklbf2iV\nhnA1t7lzBHk7ltLQ1YA4Q0Kqz2M9od/dVAmk0heN/xUXwjbySgjcJtYrAg+j\nG/vaL6lrmoG0lwvbBNZDjQ3yQrL4PO62T6DgvK5xJikWlhs9HwowQV2Dm7Gk\nq2zPkcKEys742jqUCuw/tua7zR0zhsJmhKUvzunTNSMkt3UEs4Ifxbjk+WZD\nGrfcDtX6U3SwBNB/ysVUZ78itxjNBPsvOb7QhMrXoZ73ujtc0hWQ0Gd/cLjE\nXdbhuwLUx5tR/D4Onzd4qiMxX97ZuYKHxzflUJz/rZZi6J0ewM5SvQ1HiKBz\nRCUAxGE5hA1sjh/fvxFLFUZPZncuxGvrwU90alxlOqyCfT8jZ7G9BuysQeKK\niKp/\r\n=WX8w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXVVwnQhid2nFK+Wm6nVKggyyl/K4NO+Ik1AB7Grn19wIhAKcANX65IQQOOwxzz8WFW2mxQ0dnHcmorUXX0ReBhVAg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.bade5580.0_1587165553159_0.3448707960383892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dae38247.0","@material/top-app-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Pdv0It1uTR1Zmiqz9zHMhcPwBwKPm2IsTLuciiUZTFRz269rTJlihm06NC8a0AxpORlvurY0/9GLF1O8acbLtg==","shasum":"2c2f29573bea6e49dcdbde4db97b57f69020299c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.dae38247.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbICRA9TVsSAnZWagAAmBoP/ixFd13UQ8oVJZP94xyo\n+KBjKbfADlq3Hs/ZJAVlIe/pz/dW/9/19KJeldx6VQ8KaIEZXVru6qQvbQ8K\nnQIHvMzS0sZNMBTJEfy1pIrLdbxNLxwj5DepnrfL+rFrbXFdvK44ZgAntMSV\nFA6p+WWCEsWSR6D8AyzJWx/JZ3QOqynrjV0xFQH7gY/ljUTlB8R7MIlXQ41j\nkZ9JRsb4QEQV3uDmOeNdC9GEaQ/CXiKcYk7Le1Gy9G4Zlwui7PETg4xvnUno\n9PSsKu3SeGV3JFw6QEiFGWUudPFf67FTxvV5+96U9tuR5Y3w3bb5Tf4CLwex\n7ujMNLHlVeGY6oxzeYVa93Pa5f8RksHyFiF1TAhD1GhOH3FJti4/0mhkaeif\np2o6QE6nKTXMvNV6tOMCEh9/HN4vF8Gb0AZkJLuVO9/O7Qx6Zx075MWNCGNb\nc7D7/9gzCeZzbLLDrrlIec+eDi0VgzfJPF3Pm9DyYn2yFz1xQPpX/6euvlv1\n2hG1mzXaHIUxyCiGNJG3ZLfJs5617uaTEZWtsH1mr6JIyyIH+fw5wsvU5Xx9\nkr+3x+f33OjHvaj7PNnP8YwuV8reJekoyKnMoXemV86pby3Z9cj2nzDDVBQH\ngrN/6e5TVJlIYp3jenoL1bDVEpMdUvP4L8vLCoKi/+58xqUVpzepmZFKEKjv\n3WkZ\r\n=boKl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBEJthSEVob5AKLrSZphYwj8htonAbk8rypvQ/dwpi5nAiAh16r6TVPuBoI7c8afbj4EsjeOvXNPpv0q+br0tQPODQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.dae38247.0_1587168968205_0.7633565725024769"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/top-app-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jJm2LVq77XEfpkyeZnJDk1IWLH43Cbs2BHk+PLAc4QHbReAT7p5Sci1GOZ/51pbRT4mVNicepofuWsrjyGys4Q==","shasum":"877742eb2baa9ec0b737c9f3693cfcfd89a00593","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.a04c0b82.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksHCRA9TVsSAnZWagAAOyEP/A2PXDREAhFIG1WnO/ix\n1hy84w9DII52kZrPokZjgOgyGsT4DwpcKeCXEOUrQ9j91x1Ifum2Octma91Y\nGfb9Dqe3PcbYSk758I+qfKB6heyqfGJoNdkgw8lw8tuW6QSnvb1qrhLyXhU+\npLF5PkfjPIzUOSlk974lJ4ScYByhZL2uG9qFcj5PXoY7fUcOhLHbIamCfdwR\nrdzJ/23yWbAHjgy8RgjSd7CUY3W9L1dBJl51sXXTOAnpkLQQTy6Thpqt9MUt\nzl7lE1Dl8nC3dKk93WaGSjDt2XkCfsGfmf8uJBm/sOGJMqF2gc72flzELhKn\neluq+kdGRGT2Kj18UlELhBM0M+RMJpQ7oTJ4npKXRwKxsBuEzlS9hTdOv4Qv\nN2aexULNW0nhrifNwIvDmX43W7zWey9C/jQp7byHTSLLocNucyZEf9lhdx3Z\ne1qoK3g1Ur/4CJ85reqJJR1jFfiXlB32O7T7GfpAaEMxFtwa+jQfKeQx8iNZ\nXL4EZFVBFz3iI2CnfdlMvc5w0rqQ43Sl8tLwu10wKsLmUwLjs84BEYwyRdJ+\n2f/Q63QSNAhrOeHsSqQG2dB07cK8qTehN08pAewd2acjX7/66lMxYlqdEh/G\niuYQ4MUf2wk1b9puNa8G/gCZ466qTK/ycq9mwkTsyHed0cluGbk/hK3D70st\nr4F9\r\n=7LUu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz8JZ7uC3i/AElp1FNeWREuomvc2naExgQ0eBL9pSBHQIgSDyuo4VgjuVgkH06jY4oIPlJLpQObzBd7148JgBykAQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.a04c0b82.0_1587170055209_0.17040347340421658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.715decfe.0","@material/top-app-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-D0MXcvX7fPns01pZsdfgUmeRT3rt75P/Ymb9YkByquqaiMpEnqiNZWA5BDm1YdPgst02ObAJNoCXmE+SinRmyg==","shasum":"ebf7b4c45f639982b5c6364e5a5a8e7a471251ab","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.715decfe.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetiCRA9TVsSAnZWagAAz6kP/iB+Hb8RKV1E3UHWGDpJ\nfuF7FJOcvIvkVaoKkr2ITS+3MLe+3Ae0DgUNMoL//MOe9ggiy5/rVo/6rS/K\ns3nhUc1uQLtutFzT4yZfwEw/VzSWPK2u1b2Txp7yZAVvl07kCHGFHoNEVDKO\ndBmLZexL6OqEqIsNAJ25gTlXJVQseg7oUP8WNVL8AtQy1HIbxCpXoJPFKO6b\n/tE85aB0H9WuNkiarFqaKw9Ot/pgw9OkBh4QU0VYCmPbDiFHE1eAJN5SYU4K\nC+HXVTU4HoEEZLdOvXcpLn6o9lt5ZCIRTkwRfJMmhlbOxlJkKLkN2DMqg2aZ\nZ4SODnZA6WkwihOjYXa9dR+t41gBOzSDEyackbN7o8M8tp1hu15iaVk1KXBh\nYvG2DwRDaGyTF/Q9TdIMEMDKWv1QElqmQeOeBWg7g2FpvhlybnPqTYX/w4oc\nkQDeKG8Z86eJcElvOS4eVoRh/4fo+wJOLAP06Q+IeKEs2Ag84JlRzmJp+o0Y\nLHsAOhfoVtrWcncvKz5u0QaLBFPz94x4WrkAuMT1PAWlmcBc5WAp2ArFmh+/\nvy7SO7il/pCD4pnegQDoNnEoolhnzFAiCiQVeuxU73ggLbkpy1Na77IYhwuR\n6Rgp39YM5FHB0BSV05y80S5iLuN1OR0poYIgW5NHB7TezOk76cs75sLooFwF\nPK+q\r\n=dDHS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIChespdIHLnYk79wAAi1oFAMkkzY9AeIslwvpLlu0ZHOAiEA+nJDZTNmMQ8OrbyCEoh3hWHDugFWBNDU4QL8Lqz7f7k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.715decfe.0_1587407714016_0.692659688723386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/top-app-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Qlzw68WMm4GhGT5FmquXUuqkuYv/VdE6IHINcqBr77TeMS12R83haz+yV+6RbPTcvygpliDiHITznsR4Fhvb9w==","shasum":"2f5abbd93bbd202458c53662df81705193f03dad","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.c862cd04.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVLCRA9TVsSAnZWagAA2hwP/iywIUOo1azCnJBxM8ft\nTIkjmeM/OdIkIGACT53dFKN69kP1ttbldAIz32eBDn65fr9AIf/sLiLlW8KZ\n6ti3FJ/olSr5uwb32P2xpSULQc5qS3oPYUeX4crFcnDEp/CWNSWEYVNAz3ae\nZgm4bVdIl0vTtY1v5VnloWxRz13Fd8pUYB50ixs0RmYdJ5JdtGf4OQ2Rr2MT\nwJ7vG2bObiXeRuQ8wtS7YHN5Uf9KwIiSlhbwigJ9A1bFKMEPv0snS3hJhKxF\nAGX70sdSU14BRlOtCrZ4ALEEd8sCFgCdYstcDfSc3OOE59We5D0OVo+H/zii\n7P4jvcpO2gASEeMixQkm2N5o7WV7iaEZ7YS1edIPRgrSQjk0nEX/Im8actdB\nmlnit02JuaLPabiBSZSuHWX9fjjjB/LVftZrKp/VnlrCiEPFMB2yR+sgxux3\njmVwAGQCDXLo1k4Z378Grw13yzX5H39Ge0Mc+slgPZCZZvVN+DpxSDtV1nZK\nNc5VUPlLgs2eewUAT0xLg4k4mBY8ejuLObus51EcH/KiEff+5206fnlEXumG\nrolCbh5YLLZ+sKnkG863jnqZzf2pBEvXIjK7wSyAm+KhS2UkAS/6Al+CZxHo\nwlIotDci7BQuCRqvqQGYv+yjt3L2fEVBYC8p3QmPGg6KwL1vngAPcGhkyS0n\nsTn8\r\n=nwKu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTopXmfB+sV2kxFBzpSidzh/YzrUzSvLoJcekGEIXu+AiEAv8wChzXnoEWc+lpHVJ7jZcYvUaq2W01N3YumIF6qIfc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.c862cd04.0_1587418442783_0.5164422008993181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/top-app-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gBeb3ApOeI9qyYMRqAX+lsbS5iFpWIqIlgnKHlKhh1uH9jvbX4J/rHP/jIww9VinG+87+2vT3peqx4ESlVWjfg==","shasum":"5a14896661555b3635fc242d97e5dbd04d64939d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.e9b01b35.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBSCRA9TVsSAnZWagAAXFcQAI3onCSRKblHRCNGPC4X\nTE4VkV/u1WEpB9SKOdiVLOA/Y7+xnEpM0nKxrw5kOAv2XafNinJwJ46j8WQv\nFM/59wUXGpg9FpB2AhLR+K5BlXpHFs8ARztcfFd3mvjtoWIqvsom5PLbWkvF\nQ5idQQI+mtXZX9LnbXuExEbmzFeSj6Z3w5e+FhRWYMuXHRzKIJOFabii31Wa\njT4/CQDkAoctGQUpJ1QtISsPr+8YsO3/saK2nUzrI7AkSdsenqKaTL3M3M14\nfmBxLB0QaPhr1D9HKv0G8wdp1J0ezKfrOW5y7fj+9wGfGRjXJjYqKz0ZDDMz\nURcgxJjAfTDa+GAWFUO6SxikpmUC5dCCiFtLGcSXLfykTzPJ2H6ePlStkMpx\nTfLITsszmv05Ap2Up8zUx0ZdmU78TH8gjRfQFkKQhhsIMCsJPfWnro8wY+Yx\nK2kF/8zAWaR8pwERWFojVeY21diBQsdn5ZD3WIqLPHTYMqHHRQ2VrkNqQsTA\njXQ1wNHp8OXvPG2fLlIm3Hh6qLjFpPSu/LaqF+tqiFWjU0kg2f4rRZoLp95g\nPbluNCTJPslCBHsgGTTQD3PLrevMnHm/nTA9jNoURq7bVQv9vTZDz/r+TgzZ\nC99nHuTh31JUNNwD6qMpEf+0vIefjIrMlXoinWkC4RBCc4rTgAoj304m6ts5\nnqop\r\n=1UDf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDSAXMqVsmlzc5NaJH+xb+MSkF84fnskRwronwclYEWhAiA1JeRg12mag/Ihxv+0z6Aa56KwQOocHPrlJsfARsXHnw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.e9b01b35.0_1587425362398_0.354507017635006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/top-app-bar":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QWcrOAJwlqKp68a1kGEf5ECrY7cprgWw/z9007U+DIJPGQIGwqCH4NkxhVuri0p3wABxgxAVyVDM9Ydr1zRigw==","shasum":"d155628e2e7017b2a8fdbaa4e6d4dda74dbf71ea","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.ee7e8989.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOBCRA9TVsSAnZWagAAsPwP/jHVg41wy76tyr6mal6m\n2HGLz3PqK7gyetxL1efVt9AD2T3YI9zbzj9zgx+P+tiH4rR8aOJ/auQDt8bw\ni9Hv2LUga4rCgyNgGJhaiOJ4PEF54PAeFvf/g9xxwcOUgq+cP7dt6XgoOgKP\nWNeGuFgACkSCmnNrqyzP6Tvy6rqC1eD3jBzCArTspqK8MHgyPEildQ4jzLFk\nIriZ3rNuHbmEBSfsNoa9Xz4MjyxC3jS3qdgJctbxcjGcQhairBDIRVIjpp2j\nFpDMB7pTuSsVDgvTMd3TEGUB5YizMRmokQSYZWkvro3BAMHox4rLORYDymIe\n3dlViEKlLQ//uq4fRhdw+oCDOaLAjUCgD6E/3CD3At++QcNmJ06eQF9mQjDQ\n67/BkC4Y8eTyd1Gxib043kqu+AOcxnylDakFBdnyOLn64jF2S3tK0w8biLNp\n0w8kuKelC9GBYCOzfA2cHiP5TH2cEFO0NjoJNuDE5KB2sR9FOfMK/WzwnkcN\nthA8vX+B7R/Z2NAA3wOP1EMNLSo5Md+U6luiLrNC4nqDn2hNXuczOwYa3DoL\nGq1bBixN5BEjSyI8AypxXoN2MSr4Cv1X+y3df4yPUys94bIF3sg3Bd+rMtAo\nrY4KkrHFxvNz69qtkVkyn0L3NfJovZQehHIEDfc/es+21ey7sJazBEG5D2bH\nNVvT\r\n=nDrz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDV5R8oYJfM0ESwN133PytHB4ZR7P4BWshwdL+FNdiYWgIhAMH02t3fzoCH89lNpIqDQZ4FOyfFnr8h0znWL+xsauFj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.ee7e8989.0_1587430273013_0.060352321499140604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/top-app-bar":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DV9hQ+n7smVgQeumk5lJNZWDiDJSDCYvXdnAk18rpXjALi909NT3ne61TANjJMpDlAMw6Y1tPrmdH6k/YMBvxg==","shasum":"3900fda42305691168280d985a938f09a5460647","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.9bf47ffa.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz1/CRA9TVsSAnZWagAAwaIP/1r7JipUHoht3MoSIxQF\nAy/APFsQJI8pmVsWFfaeGP2uZjkbcNiC9B9YjUCcEg1mqoa73oVTp6SbYXuy\ngbUzIOdI1XsHcTIQ6p2jxuyjqllfwWTjrriliXF7ByNjf7cCQjrfEEZm6Yg+\n77nQEkalEPgrq9kevc0xjTnmMt4oKoazw5Ck4di3viUDbgnpdyRWq7275SZR\nn3weOr0xwjBEuOGYfkOwOTyl0U3KunAVJqU2up5NVi5Li0oKYnwypRak6DxH\nZWxRQ7c4BWVzj++hcRQdn4/zEyIpgosmZOn6xx8p59KrYQ/vXQtaX6InXG+X\nR8mC2tae5LnDtQR88GfVlLV2fuET6jwEsnCdn9113K8itZ2T8yDITvuL4Z3+\n3GoiPFuMKN4U4u+t0aHcP45j98tsaL2NgQB1+y/e+Ys6DtFUCPu1fzaIc0JA\nLB5Zh/7hQTEcC2PkShJEWfeY1bF23A51w4xbjZ1I0tE4jQd++3B3lJeWSXst\ng2pNAt1o7IryHRHHHvuY0LtuI+rZz5caQwPS+dzvsFS+DwqeOll5jA/PCirp\ncyv2iZQq7UNwzEsLcnCfvPezQPL8X+Z3OolOCgv2JoGID+TCtSA1zq8NQoWs\n2agkvQbVleFOOrtSN5kCvfS7NlfL9LM6UYTGuuYISUMwN6yMN7/0DULIQOS9\n1/a0\r\n=QS4C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnv4+mCjAfoXj7CAaCupWsKbBA3ts6dNu80xanNobwAgIgIr9F9C7CZ66dXXtDRdYJZ6F3Ikg+LF2zpmEv9IoK1A8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.9bf47ffa.0_1587494270618_0.8470415407136114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/top-app-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jg1rH9QdvB0p9WWEhuS7pTp+T+DVuyHR60kVSf7JhRd56CN9DLl/3sujPlHkaFP1CVklw6gl9jLBLVdIKYPskw==","shasum":"6421eb1a919ddabcc6213bafb54cf3d2871704b5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.078dbd98.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2GtCRA9TVsSAnZWagAALwgP/0Qiv/0mDguHbmF86cyG\nfzRY7Va6QYLRUTktOQWbaULkGltNOQ7J4gC2Mo5cccMjJ5okpUo4d7LAMqi9\nOcWXhTOyk5kO4vzqqqbWxeymtI+r5N7HsoCVtPoBTEB2UfBwt2rGo7sL6BkU\nuqxveqPs6/lRAEHjHGPElgLCTKfpXVlTlUAwBu5Pfte+JWu/e3zJoGh25Bn0\nqrXpa5ui8SbITLZfdwIi7qcWiEJiBAIqM56pjCqqssB+YKjCtQaDbMa1l9Kw\nIOWNLBKsPywgIpq9npUyQwucdSpP1vQV5jIA8UojoPobwiMYrrhyFzf6dIgT\nBWNsuEJG94SkPL0oS9izTPnKL+p/B5U1i9jM3z8vxWZ4mniZwpowz4hyITPh\nUkQDNmD8TSBH7udLxExdlD5P4vmFWHPr1rw9x5kDEwQrlRKoUZS6btJnaKNj\nGd3DC/IQxJ4MZwxtVvcYLac0fiX45EQ1TV9/7g++ASm6YSJvgM3ON/mIYVdm\n7cyt67tHSrN0qqdSjoy/qlUyoS7BS9BH3ce0sTd5ag+j4KwnipcZHwyrXwGu\nJL5FBQisEiqmzzFetLZPGVyZ4nIfHX9JjrwlbJNHC4eiWsH/XAGE0dvUtPty\nA2uqstVnsKNF+hRVu7jAWWTNPtY9GERsDgPaMmOVwVYHZM2jgzIj8z9MOwuo\nMO0d\r\n=VkR/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICps/FsyE90O/GTs0XGNxNLta67oFTY9oegwKM4QJ7RYAiEAnKzsXMHWhCxLCsSoGm8jRIEqKARSMFrJY/VpI4ol0xs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.078dbd98.0_1587503533236_0.029057757766026038"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.953015d6.0","@material/top-app-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ImQeEVU56v2VA04EF6Ed6l4HKJgjFeYlHZfNM3tlY9vuwowqR/P+xC5K8rsWLENceDC9uQ1ciH3FE3hNnFsnUA==","shasum":"111cc30d69740100767c8e9c81db17decfdc3f0e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.953015d6.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2cnCRA9TVsSAnZWagAA7C0QAKPyfkR05U6hO8QR7aYM\nlOA6JNJ97JDYSSS9nY40p/9pCXSr/baR6NeRdDxtRaOmdwBIv2lx+BvoAsoo\nEkM3EZc1Tvzxc1GBO+hsLhI7BwO0g5NMYsLma2ncD9p+1jPEc47uW0+GqZV7\niSKdh6BHNsDc9lTo4+rR+qz6DE/L8stPl867xezyN7H4nItYNMRgg+2Riz0y\nN8RqrT8NQBII+wcguIxV1QSnwNPonL+sBaQDXkADmbtzkdVWOR4GU3tdsu7R\n36K5t5N7iwkGr+S6UTrzxNBXzl7kCYlMc7EJSD1480a6YTAdRxPrhVvPeYNG\n4QLfArPIGlDTwVu/RN/mhkRp5jzJHQZORbBv65jarehDQt6JQxtn4IY424JH\nMn7A3pu9eiGjlswOmR6Sc0qJGg4xd0wXqATXPfAiJj0DdI84FlgIJr/MKp5K\nyCTYQJg4uRI7GyIU4yIDJp/HZtc9CtCHlNhztuh1mejCTQ0Vfv6VVRwo0cFQ\ngFU/GH6Mz7etEvlVT2ZB21NaqGh+Irrk6zJRJrSqvgVEVZvP3oU/n7MZFi8F\nbot+khpU0jg7kRHI7Qx5St2DDEXaLF2sI1N11/TpRFghV7MY3WyvMS1JbgtG\nfte/UD8rInyMcvxp37ZOidX+o+KJQdqXXL3MW+Yow3dnrOX7lki474E6Rsjd\npRt1\r\n=mu8x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbMAwxwOmTr9rAUhpRwLpw2FshMkuF52t7JrRdN9GDYAiAQdmhW7awxVeEJxRfYSXQvBeitArovD1+mBlUsdeNRqw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.953015d6.0_1587504934931_0.002246641740316191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/top-app-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QmuepZhi5AyTGtNVbz2HyaOYgQG5v/sGa7mVpwKJgXrBpvNy002Z13kFiIPBPLmHu+9uQJ+A1jpBiu1bzQd9aQ==","shasum":"ecbfd7bbac57ca232b3bed5ff3615ba457eb8b9c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.c360ec63.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yeCRA9TVsSAnZWagAAl1sP/j840Xi7YpvTGs99sz+4\nASeVyRAaM4c2dcszQlRMWvk/bEPykZHydislntAqn3kktAB7PYjzQVvwN1Hj\nMOMf+Uv5mjbaFCqNvj6TUFfAoxMcVJKRnu7ha/MWbMFG1uloxha6uclPPfWq\nY4q4yMJjGQurcbuMbct77h8RbNQSpEgvAcipbR73wt5EzWDYwlBZHHQJ97Ml\nmC9jZdQdvaJVF+4pC/AeMGSW1z6/AapkkVOodqG4uCqpK8ttBZaSqkhrcOT2\nC2qm9a/Y7WQ/oHi4+Luq9xxTHptOAmaVRn4Wgy5tDv+1J1MksRHPEa/4HYen\nygV8D+tLRsejPjm6DmYfY5KBhYnO8bUw0USeC2xMGB2/27MweUFDBxMHXt0C\naQo0R7Na8CHv9Hz9k4iBk/W/vj0aAVI18EZgONYJbnTNmZgYVBB5z5MuPiW8\nbokCqeAZ8/xJBBkWMXIgn/Aq5G0Nd3pk6yxbVdW3JR6Z4HjYjyeWNMn6bpBl\nYWuNa59Z2r1C/BZRk42YSwsy5cXR2+pKqVj2/72/ntP+Pth2L52+SXI2LC5R\nRjE1HuOKgbewaldIAvjtzUSFpBoyLhEUdGNZynV9eh/Z4z/X201yZY4EYT+9\nXb1vCHOV8BsiDBpP1Mbz7s8E0wob7OkMN5aTTLxGfrnIARnYtXv5YRb5DBx7\nlNRU\r\n=tgol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhhVMiio96uOz1HCnT0qJRZpLY/ZDzIbSXfB3cefCEUgIhANZ7/F5w2ICk0Bxy3VKyTUIWb57QiMxMOrsZm8Ku/Td1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.c360ec63.0_1587506334286_0.15075458653805263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/top-app-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JgC8/fvplpMrnbvKHd0sS4lDSdkrZLS+wBAPcEY9Y1oTn/++vJ9TDOMTh1KWvzUXdh/5FpujsAEaxV1TI1+NAg==","shasum":"a0c029b65cccf0ae373d9963d647ba4efe6aca91","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.d71b65aa.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3W0CRA9TVsSAnZWagAAvMgP/1dLmKt4sWpLZyXAiAEs\nnIEc/dcO63FObCS25T9nEhbrY2X6jUGPbF4+Z7C79c+yrM4p0D70Fcf0ARTW\nb0ObhjZbHAg5rnTeDS6GE7S0X8nR/p/Kuo9xhgcS/8Mncps/m86PYpS965VN\nzpwbSlEhOFTay9+leT6ilf60M+ZWhwlYarOFVVZZTd5gKCXWHxeghv/tD85D\n2PUUevLJHmJLrvqUDV18jsw9SjGOvOzEl6XUrolUvm3KChhFofX03cJbV1pS\n4urwMoir5WRQ2++p91pes+p5ubLm19WJn35h5kZum3ny9yxnUv/4jykncRbv\nSkQ6wNyRcO6uaAvZIazxOxeccfXGiFLz+naaEXdeoRWtV7PesdkczxFQ4geV\nIjiVwZhHLwZ/jqRcys0EQhgffU5KYk+KlHwGSIZzzafLfgzawZ7ByHSAEoiJ\nNJnyeZqYY2Nlh7DmUqMOYHOOELE6r5kyCdK25KiSj691wB6RhGez3smDHVU/\nzj6qw55/GJ0vYjbxIYXPRTGV3X/XACpV9ywyGDzU7Cz9KkWT48BwzNuAssiz\nmTefE1VgvOM2uwQhD8F6XH6tOeE7ppMICq3jI0HYc1p8v2TNLI/3OtKPUM/r\nwg4oZPcE/aB2jnfEyHCPR7py/RjAab3OJ5o/F20Qze4vGJtA0lM7WPG4CHgL\ntdLa\r\n=6eJj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJwqT3w5kDMOOby993Y6k5nbmWa+FpF6VTclw99t3jGAiEAu9yEUadXDI0oWjk8FdesbtEaLyqwYebf/G3FWnyeJ7g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.d71b65aa.0_1587508659788_0.17234930300696072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.58d51135.0","@material/top-app-bar":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+3/ITKW1TwixEIamSxP5gnoHxvH0S+c5jeEt+KTXx4FmzY/RTqeQedn+QQvZ9qNtaiYwWZea26JVAUIoNZlDiA==","shasum":"657c151bcf779494af2c692a6d8dc630c385f991","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.58d51135.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUBCRA9TVsSAnZWagAAxQAQAIhKM8kDOKa4L4rdvmG7\nSNhRWKM+lH1zgpKrt8yqPuAR3QZ1AKVuLx8zdie9derobcVtj5gM6rCQkzcB\nWmINjXU3zqz16PNmebKs+2aFGlUcjYgC4ANBVq5qQ2QBuJJF5ZeqFx3w6+0V\nQabz6GQk7JRF+DBce7RLVZiQ79dzGaSEqfGMDfZEzy7+s1MRP1YRm9HtLXn1\noRlLUGB8JmfAorOVnz8Z5GBg44sci6xpTZEmjgXPAId2h2ENIS01mC2F7eeh\nEEX+4sr71IHc9/w6q93r1IxSjU56EK3EuaCpg2R8jNkOPgEV5KX/GE/mOGP9\n0RFLo6hamfcXeryKs2dfsBcAV4bGoC/gWWapmLK75rDf2PemqXg/O1+QN0+T\nManPWAh1uxCEy1Q01PENyrZZem+5OrR2UJlLW0Ty6v5adWP6VeGDwtf3cxDF\ngSg1HuZFNeh9YHjEAW0xPUI/RTVa/boj3G5Stj2/IEvRRJR+qrZw7rFW/Ftr\n4A49abQXU31a3osc0smpdCvCpwMV6gqzjjxuyfCVg+Jg4qRGmdst8Mq5R6oS\nnMADfZQA2iCtzgpfdqiqutV+TNvMplHSWBrOXs+yJtC4CH039C67inCojS+I\n2CLBIjZkx7BQjBLsz1AAP2TXpbZGsGxHhvRKsolklHFv1MkjGaa0E3in2cIO\nTR7s\r\n=H2BM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEza9u3Me/v4x18xD6fLZS0I6Kh3+2o1cJ6pg+aomygvAiEAzlKUViu2bhZHZ7snp8e1SJIYowg9aZbMUXB02vcjtnA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.58d51135.0_1587602689179_0.06458124729148107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/top-app-bar":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0OGendQLZwFWITrxVNQ4Mz1/fNH4R64WA8d5NzzJkHGkm9WTOKx/y6pStMU4CuozwbUxxbExp3FUehNl+0iIgw==","shasum":"b698f2b6f26539cbc9d6eee2decf788940133c2b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.d0af8ba3.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodnzCRA9TVsSAnZWagAAiTcP/jPzu5AVvoNTa98EE2cG\nUW/yiO5ICzkIF7EX75Kj/91nqdVrM+UD/qWRPQE8WcBWsKUr2tGV/leY5Her\nFD8MMeK+h1+6h0/s43Bi6YjUnUI6MgZLfjq5bzTnXGN20x4pk79apvunFw/r\nJ7lRTIK2eBpGg9pvfwoL0eWKBTI7HxxJgvbDKOMWtI1EfaUBUpKUxGmZ0GHs\ntVqV572G77sbC+/QcUOWZBTdOM/IPviO7TK9EuOZMsy4TwNnxWC1zh2MirK5\nAACOxibLKDfo42BKwWmGUO558IhyvZurZdFX/TkhXc7LSdbKrRpPulAxB9fl\nLIF6yjmz1p5Oh2oBNJ6A2zA05AOpU/yJJIseDhmMhQTJxTwzxztXdidTN7sp\n2xwzXm7Q5X2zRfinyI75LjOUXV5qZuT9iC55p6Dsk2/qJjt+5bV0piFdyJjs\nwUouf/22T5W+C962c0fMnw8nQuIj9ocP+7DTMPwrD3uqpyQisV2K8RPFHcr8\nZzGtNoQMB/RdriOK7XzEpK6eTCwyTQy7hw+CICBasM22iydh17NbYn4Nh3Do\nV5abk/ILN0qp3w2XdumLMnc6FhpIblTQNp9Ploc4RnVXBqg+oava9vDRIDAN\nIrjgntz4851UydsV/GFZWGMSO1Lsq21maKxm4xg96w4U2Q4sdCwdjFHds4U5\nR//s\r\n=6Kk+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiAi9PQszOiVDIwQ9ftFicmEl1XjI8Q/h5i70CQn0KBAiEA4G8fsTMQqPG0T1T3aR0yTjqmED0F33ZVxG66oK0Mf3o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.d0af8ba3.0_1587665395515_0.3652133478142692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MaYc81rlLYVnYkMgdHw4VFpR/oL1Yh9b4WUfuYGzgtwdVT1gdfjp84XgsWe3gmFNxv67N7Ta1eMmZZ7evjGOzA==","shasum":"49cce4cdd6fe9f56f962c24d81d17b2977277d57","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.8872b17b.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1ZCRA9TVsSAnZWagAA7EgP/2ThcEowatD41N9SNhX4\nubKb0SLQDh99uY5kTeRGTQBBHBoY5I2yZgbnDxpVKG5sLqGFCuGyX25rjry5\n6T+Et+/uGVkTKPBNO4c8vJWYnU1tAjID7m7xod1C/fldDnPBJFZ1N1hVgyLV\noP1OwP/TbnOC2MAyHEbeamGm+4gDydpeDXcpaKpPHlwRUYqH8csEqfU7fJAu\nBefmsMsPQqwIRWndZEbji6iTyQjP0ezpdBFmvxMI3gPAU5GuLm99HqKFNxTH\n8SbmlGFszKQfL4D1KKXdreyYI2z/mts5VUgn8Q63JBJ/PVHMdIizrOkKIoNz\nAHNUUeW/Q1HxWHhd9GYQePBiz5bwk60XYCqedbzy/+NUj68yPF9jDUQezStJ\nb0VgoRrRwFHFF+8K+fDSeERA8OJVdSnnwDF5g4tOfUdgVlvA3g0yWZe1C8eN\nkykwYIiYJMA5Ktfkli7qBN7ySKCkC5XvU2asXfd17TmE1mmpuE0fzaRMjMuv\n9+o4E+4Rb1BiiwVLx/fYTT+kzh33GoNsljTRCs2pu6JXpRdwRnfb9tJf+qph\nr+9efOZa6erAgWomT/biHl8rlDGCTpDLIbcXxQDYgey7wAoaxUOSJjFugoQD\nLbALfageC5m5FXexgBFOUTMP/24NxYxo+27lvLNrcqrsYz2BTR7l3pwnR6GJ\nF8KI\r\n=H32C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhC82s8I+4sAnRSPy//IzrT6sT/8uyCKzhU6LshOwI8gIgG8bYSdfKEu1mcuKFqo8TSK5mv3o1O3VZd/bGVnHVISk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.8872b17b.0_1587674457366_0.8040573935315831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-f23iFEnn+To24ebsoBHCj52ki6Vn+oeIcprpMx2oAjfBvuuZ6Um1goozpn5Bp6UCEtS4V/gKk7+CjHqreEH84Q==","shasum":"52c2c8c8ec76bc143f35456a671d72cc39ebce42","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.eca1a610.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogveCRA9TVsSAnZWagAADEkP/0XJ80i9ziDE2YBh76GK\nu1yVDx2bYC9PRwVf8//hvmLoFQkzf7wqoBZWYTgp7xHzW30Z+Yk1hUTpuMBZ\noZQSAq+/YFwGdD2mhzJhkJh4goa99DfIrPKD1I+jB0TmF3IduqW3T/n2+pfW\nN/wmUOuYFk5nRUFuEQtSYBN4YHJd9032LX969ruG2Dz3WdZR+8Z3HVqdGn98\n0y0yDZs6HsA4MiYKMVSKfGOmK7MnxJfQyaW55SI1qxq/LouYrExzl7mcZePI\ngrQBnzDPtHxYML0p1+xd1ROTHlmRot/Fwx1APL+53awpZMF1MIEP1ZVHD4r9\nVogZoezB9qpSgyU5jY0SPENkYNWuRMGpChPAHt3RHqPlc84NFk5eipwr50IX\ndq5LUrrwtEUOAili9P6lFE5Z5q3gDhZ2Nu1kFeHj75r6eaPV6h3VmoKmwZuR\nTqbrnU/F03pKSEDCh/8Hd9pl6yLLp+zS3DQckw0zIAS2J+YdVxpkMd8L3eeZ\nGYXlHyO815W2pwTIqV7g7Pwbwqs0YSBCPQK14uJRLBlSf30oKcWBsyJ7La//\nDajhW2dEhstnu1EtMwnQMvEvqbNDjzwtddad97DX/nxtio6FxznUCNSW7k6o\nJnm7WWwMNYLl0GbFEx/dJAOiwHo+3nWAxMKStfV0R3CzjMqgIyYdbbfTdC+c\nhdaY\r\n=xuYo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQSTUvxiOlmVk41nm6RQt7CFK+GC/BvamkPF14mgfCqAiEArhuaZrN3PBFLNI6I3fQkbqfFFIPCsjW7vMUxC9OkLg0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.eca1a610.0_1587678174254_0.4069676847078856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ckm+4t3GMVZ3p9GhYFf6lvmZQF3QtlksQpuO2BwxD39kOYJ9SmB0+Y3re8mh1yWQYd9ooiq2rijDlxDpIs+nbw==","shasum":"1e58329ba143eefe8d5d8443ab5c5c8eb58d1b7e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.baaf529e.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoho7CRA9TVsSAnZWagAAaikP/iy0YWPRx0WHTHVp4QgZ\n7OQTI/OEQcxNUG7MoXZJgPnNWR3t3f/oSJha5AI26x3iLA1iz90SIBmbqW5M\nkHp5nJEB+OtokDyF32NbxCi2QdBtvJGYviN5kAJaPwa412UhnkKmlakOAjan\nK7FxcdlvydNrOF4CXPFlVQVLhprGSjhbAokcsxg2WI0DVdlIUexJ1z42pKAf\nBTQna4pnnPdSmGxvhXjiWgyq1OP65yMY/Se9ug2/zFmtuqndPajux4X+A3E2\nskcmWW4+Hl/5izlvgLikLTKfa/mqqywDOtb7MU1vdFkKPkg2VpP+Tl30IvYx\nafSZZkjUr9Lxnkopkxb56Yijv0yyGCDwpKeIvr6CuXTVu0onRefeVprtpzRU\n8CGRmuKxz5bADFebfZGj/7JxBJPUGrNKF5y1/6HzrEz2JO6sOrY1dwKfcn+o\ncfW9xOI25tmIgYugI1s/i0T61a0OlU2kPHHAsyX/sHMvgjz8GBe9aKTGiZqq\nv1L/q87Wav5DZ1bD53lBOmVHc0ukXXhflFaFOakHJGiRhGsZ4lluRA0/ktOW\neTJPkwWfBqO5GwyiOiUCNvWukbSG5Nvno35h6NNuL0UMrcixUN0YTefGC6Kp\n2O4gxtBot7PH+tuBPwWgE14mKBuDhY9osJHSKx9I/m03KHMzKxkZABj5FOqP\nYROD\r\n=dKTh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0pmhBU0e7zAMBtnNdiCC3UeUN1HrmZzYsTBA0UJUIbgIgMsvxYmjqECnPaaIOM2hPxZ4Cq/SsKaseuJucrw8nNX8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.baaf529e.0_1587681851026_0.6281421786486809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ok0dNn7IANpqxHQa3atylVW2kLcJJW5hbv3lvWrfxpRKzXmkDtnt6p9TTS2W40WpA3feJSwFV0DuEMm+X3ew4Q==","shasum":"2406111715f5c78b8274da8f8c6da0e5973e869e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.7a7992a8.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFACRA9TVsSAnZWagAATfsP/RkXA1KZJOnsbVRGm27E\nYrLW9WNBR/0ABnmsx/5JZxfjBwyNc/7FFQLPPSdh3m5zpfQjazd5VF4Qa6js\nUh7VnC11AVcbYxVGA6grLfUvbeGQTEGH48o+RqsmO230JQTvaU7b+0AdDxZA\nrbfXUhR/2qYiwVm/+E0bNcGUPLpYvplRW4jEyXgX+y9vEApVE6MIZXVrUbLr\n/J8Xv5AldUs2VvcNmgTTIK2sKIawiRPG3Eqr/3c49Kyc5nB5BCPeC7Ny3Y/N\nU4UG0I/Lt6hEI/5xO5p06nZcRJfZKv/errefkifMKJNyhRyeNMHACuiXiRPQ\n+BUjuDJ9nB7Sk7rkaMSDSEvpRdP1NNwGwVgmuHzdCmsYutEM2UHvtJoouLkW\nX0pJ45wIVxJof44EAdj/OZ/hWBnS/GGHnkmZ/ISCrnnzIoeRpYxSmls2xLgx\nDF6AEkjNFY+whCHkjC3pkjqakim4lPrPTVsJjmrCIs8mN3mJoquQ5BISHrnn\ncuNW+Pdr8ZjA1ZN8xHRVu9dMdCDd9wY23WO7+ZL81QQMNQ7dRCXMlFjO9/qa\nxplAR4iG+Ke43FgJEk5XksjasVThl/6gLniM/xBai1ZI/VYSjQhDOmDhCCRV\nJ+qbQH8vwWkTptUkK48GzouyW7brNFvC2bSxWKrac7MbY0sh+csPUUGQ/sC1\nCrKI\r\n=r7Zb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3nwYqKUDnN5zE8qw46aBmzkKekcE2kAea+f/gbXhIvAiEAqYCCafjQpiYdigdj0B4h7e1hcH7J4YiytSy/ywc8JOY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.7a7992a8.0_1587683648183_0.2573797651553389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZhmwPo53JHLG/FyeZtUyDSiSXBfneQLpjyKSguHGomYF4aKcMrMulGRNITu0GbKHpyG17vJUTJU+fagbK4eEUA==","shasum":"f6bce9462d571082e0e9f02b1c5cb6e84b89fb41","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.1150d64d.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBdCRA9TVsSAnZWagAAZLkQAJAyak0kDLOP6Y6U4mAu\nBmGV9osMZWIWgdDppKcjzZkxibl6RVpqgT+tUN8OUZ3SyYlmy4Ln2IHf3XBX\nTpPKXSNP8WOunoL42bpvtaMf7ENqCpYfJbSOh9vZEQvNvTnPokmbIkELlfbR\nj1OTQyt8ooybVloKz22dqrZH3zLlYdaI4+kM3xtD2J4LHhN+UbNzhCUkG/vo\nYgYo5pT4D1RwIMaiwvK5i6SW/2GMxPJIoWMmiC5A6lj8a9NFE6OnYBaoEY8l\nvkYHzaqxD+j0UEXB47Gr9eoAqLBmCmmXt5NW0kwXMJjEMLUX+ZsfHFf29LdL\n9hmA758MZBAbpf9Rd143HnOWGu+MZlc/pOG3DZoNbf0EQflQ0ienO0+i0SzP\nnyvP2UsX6V1+vXqnTGz979rEIEs7j0P5wFCg5a2r/Qwtdkbt5qOTR0SCgfsb\nAvHJLi2fBGNaST+Cf060gxam7OEj1cwyjmbp+Fs69Aocg4eW8kdqNb+me/HT\no3lVcAapKYneYhPuwCzkUOOupBVqp8HaF5qgsJX2lKojlVgIB62atMVSMzE+\niqxPyqm4gxTh6dHmv2SL6HnhI4rMiNn3weUDJPacDGBddumfQ9Da41COgUfo\ncqLRwXKvoM10anOirenKlksXXbqz4yNQiBOb8csBjdunNpDgfje5sxJcAnr3\nQzFE\r\n=pBKM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyTzW6D7joJOLJONb8XObyTwrGV7ZdlJHtXqCVhDpskQIhAOwcNpDJDqCRBaY9zgH7YTHMpMQsyUEyCjmslFQOQCYo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.1150d64d.0_1587687516917_0.08691909107353002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7qIUxeRhpD9IQnLJmGKxfyv0vsLlH988eKpQPkf5aLe6AzpTrOzIdJV45+gzonmBfNFMsqXU+QxxglNWyoshWQ==","shasum":"01044c7dc94b730c115d7da677c1439d29abf43b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.dad3f828.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eECRA9TVsSAnZWagAAxiIQAI7QdYPyQHUpOiyumxco\ng/0n+RWhClruBrX7fyiVVSU8org1ohtpVFmkF22Y5gCzUwGnJrFK8iJN4nt+\nZF+NTmLWCrP0PTl8sHMw/RZtiU9gOBPY5ZT5yhDAwasao/jKT1KYagalyGzb\nWK5jh1XQR87Q8HXaSSmMaSww7qdmmH+y36Kz8DruB8DAdwvno+JGxh36qQAW\ny7DKvUhFMdlKp4zkmSzSdYN1hzBrh+P8TiiP1Pp4t2WLSY4xbN6dUzZ7kKvH\neLsWpiObzRFyWmNqzfdAY+l4ZQ36d0IEkneYZcW0/A+xI8W0EnUcFp0m4hfD\nU869X2Hzt6hQl69GoKjIcoGCesc0F8Z9AQWuz0OeOUM1nrYmH2RW8LoKFa9a\n7wWqFGWyTElU5HS6f4PrK80Bo9nxF184RjqLVW/GlbLMWX5BP5xp6EU3nakL\n2oV1zZJRgj0EJewhpxhj6F+8cq1bg9ZyimOUjxBQ7QjE0dWWKsQAiokEeZyG\n720cPvDJF7SzbuCxFDhEBVL8x/h249YAP4OfwZ/KVDcj6q2E4BZMZI4uw0m6\ngUipbzX3SZNtHC9gY4wYJTC5Vs/83/bjvaTr/ve8FeQ/mxBn0ulvhy5GZy48\nTx84NciQTvzfLduJ853LqoMW3KaFmlmb1rUFYgFO3QzYfNN0hZAWk+p/WVxF\nze19\r\n=P+3k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4O8xP6+O6akyDqsTnpcNY0Elh9UqjGBdqKSZiel1/wAiEAhYLGTSJinCI+yP61xk9KZdscFwCi7tIVs9M+dZTP82U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.dad3f828.0_1587775364085_0.43343386268360606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LI9iRgRc6jbw85mCC7/idMZXzbClTriuMhEWhF61o3JRzR5Ckm9m0bPymcaAXF577K/qryiKVEbdUw+owfleFA==","shasum":"d26b1889bc7069080459d5c0d3872c499846882a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.1bcdb47e.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MKCRA9TVsSAnZWagAAW1cP/3Zskqb+/LM8G2AWxvyn\n6XdI1UIL9llf7ChDbYiai0ZXquvOztE+Jia+IMu7y95UzerjNZI76+hVBpTQ\nRx29bO1mhVFgGQgvEeYymy+6csm0DVo6rBOQ30DohFZx2fyuNyVo3VPiSgsC\nHEQgPZX5KfVGP4ELT3axpImo6zHupR8Ib0xKkNEYnq3ChEXKGwoUKiIayHlf\nq1uAPd2cH8ELblaRjcEXHBpuC0jm4POUkDCTfM3YgJ+jFsRyEaWxtpyR5MPN\nUFoguxem6xWGLQOghNFy4ND4raqjqA/KJyW3BZ9LCsNqIPI3V69UdRtmyIan\nQD3hcipVBMIl6JFDmJ/Wqj3eIM9B3uRNwKr32wGx1SrvaV2rwWXgeY1Dk/kF\nuU1Rr+NKyhEzeCpOZImyRMaQc8iW/dm0s7sOQW0SUG7/dGtbjLrXa2MfeghB\njVbQzveImgXN19s3LunK30EbAbhlCrQy3kw6Y15rk8a/w3y2KHskei0JPj/R\ns4hl/NcgEf/zblMNGShLz+6aMcAK7mF4HA5oB+ckr3x7JJb75uj7Ddt+jhxy\n+A5x7frX3WpCy+j1fx3b2ieQyVbOBZyemzuZ7jFrPAMUlaXGc0weFkBWomCm\npbHB5N6XVwJ3Og8GmEDV7zdOEuhVEwDFjLAxAuoBfmHCIBi4uqWb/XNF2oZv\n5N9x\r\n=mO/A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/NO+8zaLysBYdJfZU9eTgADmeER9Xgxpo3D6JGICKtAiEAqSjKdinOgeqOTksUpaG42vzTs0bmgBhmJ6nesSbUOyw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.1bcdb47e.0_1588036361625_0.3454998943782732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QSrRyd7ZBHcIczsIhtGyedA2+g9JGEx5ICaQTxHGcEiRmCRgsjRc1XLg/D86ECsgw1pgLCUYLrl8hmz9nvqzqA==","shasum":"47a984db18b5451312560850ffd50676b2777304","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.86ff1b9f.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5srCRA9TVsSAnZWagAAYSEP/0OXEYmfwHIcBKrjA4wx\nv5W0pkKQry9e+8WV9XWxIF9hC94D8NjS+p16xC8Cz4wjqNXABBWlaficy6+v\nu0TsyLxS3YGGXQJSYSUQPTjnAbkemhKjc2CdSzjUpwUEXdCw9ffSsuvaP4wR\nDKqHNIe/vZE0IsGKDY/qq5pH8cduMSyB2pLTMRRBlBGqRGCrTI2MaiFYY6vn\nnBQuhR6N49ZIhK8QnVTTpIRGg5nB+36xiO4i3kqOeJ3aZQ9iroZFQ9Ce3zLM\ngLPfjU2DqvXsydYl8ppt5vYE0wyo5ILo063/7Zlw2nl2DVSt//1GUlvgGeEQ\n2PRps8/MT0126lHO9FL5MssENJ39oqJr5WODzbthj4B/jT5Jlb67GiR+cqnV\n2LnXidxuj2NYxntS/GHVIzGEp8xNll0O0edQX03EDXt37RSDkFQ1Jghu6c78\nOUE0QBDpfRYZmaRh0ycrF9yhXulsX6Kcr3qu3cb7xgBkcKuFg0nVhJYnRNW9\nF4H4+ORNwF1bJ+MbzAEzk2wAeoBf2+a88UtL82IhIxvJkruuczjw9Bg5THeW\npBZ57jY4GTSzcRjyaSARz/zAySOA0RoFAKesBcHp7BcLUOCDiqMkkWx+MVGv\nWLal2ZQ33tzCZ0r+5cfXKqnAee4/J6i5WXu0/8I9lBGYg+NTSwt6iD4QRpFg\nccBR\r\n=/BXl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfW7fjq6CDvDubGV5ub/RLeNw82X9PcpesYkBnbeP5pwIgLz0Gb9MWlbHQyRhz94dr6z7aT7sQGs/zC8d/8NfgG0I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.86ff1b9f.0_1588042538758_0.12969153452951354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/top-app-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ROhVikYUMWm+p7xmqqQHx40pZ6wEQSm4M1dbiEiGaerFgrl8cXsZ/jpcylSq6dtRmYPdjYdc+u9Po7wnklOorw==","shasum":"b8a117f069b9ffa5b4b539b1807bc68717528b7e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.54a86b20.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BlCRA9TVsSAnZWagAA8pEP/jFkf4SysAHOKpslRKuO\nxTkglrfKrXfuMhglhnRp5ZKG9yvLj5GgxGmLIpsC7yF5qRyXxKmYflmTsf2r\nLkr2GOxs7R1+Jtk8+fEZWehc+csktW8GR/ukaL7iB4UKulODRfgfs/HzhVFv\nGbUjYhaOw8dBW72OaVo56lPlQ2B9jb6VyS6wpWsBegyprKrvCmrjnxiEcO7k\nFfEfffeywY8WY9q1Kvf4KHfxeWjkDwMNQdKUpioJVOnLPPb40qalxFG2lukE\nxG7+iD6fuI6PpZS6digS8Q8JuWR9YBBnuQW2QfpA2b3yi2N3Bu0pXuhN4DXF\no/+CtoY1vQM3wkgEGybsTETgjnG+FCvoqkodsTSgabgwOd56whml48fqYzh0\nmNqVyIs4TEZ++0TrPRztbFqyYnbYY+8ron2XLVFuM22Spm0oPGxA4prk02mM\nwBMuOWRwOQlWkukwyIqs1ED2E/gldVSG2iWJL9aOoGw4jfDF0noLTdycRGgg\nMpS6avFmyJtI3N28m8MURJOMk5+krmiF1Zo1APUrc5h++tEi4KFHqSwP14Jn\nJdLGfnpRLPhn1myo4xL8ek05Er942B1Xs1uUB/XkD0i0igUVDGKmDtvQ0/B/\nnQvcli45p/W/9SvsJLhDfGtGEwm9owbnylwg8kwHPW0c5zUcFWXBIfEuJE5n\nBUp5\r\n=OdCk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGqQPid3/r5QGsWc17GaR7qFCDYKXWhtXeuMXx1YmMr4AiEAgfYQYGnsQzmIKAStNLwSXyCsQrU77s7/Qrx8f2cMdXU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.54a86b20.0_1588043876561_0.3464387446368795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/top-app-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+N/lynXuTKsyCa8nhAknf7uTbz4U2E2d4Zbwi4zLUiMEPivCLCFLkenxAHgx/KnDtlEWFooXj5Kv3KrmxvJIsQ==","shasum":"d6f19be047a1a59ae6c61d5843fea40e40a4f885","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.938fd24b.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqilvCRA9TVsSAnZWagAAjbwP/jtRAU9XcqRMVryM7tH7\nHwhcwSOApD3JSU2p0iaBfCHIvKKQ5mWODzTOTId6EpES1LfNRyE7xCW/5G3A\n2qDIS2QFkbmAQVVKgby8kcTklHpys3C7iXfNUSpl8T8jw+VE1kZd/AKJeIUk\nsUULbFfxYpegxEbYiKGgysedP8fI4APJ7tSxxdb70NyMdxEBSO/floZUbhQf\niFycuCj76a9B8w60nwI7f2E58Fru0G4CqX8u3jYXCpKnhLz9bWxcIIhwvZEe\ntzdLAKdGgi+ryHBuxZiuvjGwVcSgeDL4nLrvJuPMO6pC6+jqTtXFtzUvxU2U\n2ldwKWZgpCNLAbF0c0lGDVGk9ZxnNPWDsNp+b1UQaNEGOL7/XNk5onXrQEVb\nukw0HIChzCYy9iN155y0izoz5MnnQ1+3pkRi9daar4kr7NEChKJZDSP92VoD\ngrG3ZqlqAGsy7rwcvYHCY6rSfXfO+E6nv/yuIRHBL5PsQZcLkZ/CFTQfwLG6\nOFHONgBqpV0RmiRWKgOPd9j/QLyFPDn8tElW9tjwjuJkLIQMRozPXOe1PrDv\nIudIBsDsCfzOg5/Y5hZYHX2SELJWWHFEMbU9xX55EaVPNLIwdwEUyK+YRnJF\nZr06aXLSHw3tPfHbY3vFMuBEBaDY1DNd6DEsp/5t71Il3cB4QWlyC1PcP14Y\nf9p7\r\n=O3Bc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrCiJ7xAPxMGxVf8/IPFJYwdXGaOANS2FX/PGLJw0/KAiAcGfu9f3FyENp7hq+GZ4hg27j32lyz3fyO264yhllGfg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.938fd24b.0_1588210030633_0.42812880311556967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/top-app-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZnQl2C94D5ZhT6sqFDsm0dxnRArYjpUwg22oJArUP7RbZNowDLu81e/vJOSar82p4MvK/os9JDnEKozHus9D6Q==","shasum":"5197c3af2b0e9bbab4ec2a076e0d488dc2a57450","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.39e9a008.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRFCRA9TVsSAnZWagAAgk4QAIrL90GJCcStfjd4wvtb\nfx6Kl2s+rW0F8y48gEstt13aUOznhdQ7otPTpd0o9gF/YXnRN48Tt+0nIHiT\nsKzsJD8muyNWW9A22ah4UyRke6Bl1yPgGyJzVz2ziRrorPtILNmJTzm+gFxe\nJJ3qBP1qoGkZ/97X6sEOhbje2idz5E6+uoQdZRLInMwxT5eRE3MNy/p9Ky50\nx5HnHIOQY35Orom3ZpyEAH+uBqfVZ+cJHtImiwqOoViz7yCEC26/TdvBCQsz\nghB+P8ghdz4fYYWvVwb2wUUCeEBQ9ygPyTNtHagVuE8N7Xm5d8JDGcC8jz0s\nrTXa2xnbFmFoankLS+hym/bizUmyHyQ5o6JM9ukyxufKqbRazQMaTr9uWayc\nWbBsgaQNTLS3vIh3ccLKvDxqd/jt44apA4b3fF3+T+zV1dH9sDMgUrlEay69\nZhMbxbH2q7B+Rabj06vO9an8o9BLZeTni+jLZM7fDWs/jEF8wBJOAPBqu+rB\nOqmbiqycHQrLwJPVuF8AEkCfvDa894n6PbA6c46PsP4pSVEeEoS6z5L8P1rH\nfy5H+gFdcz06aRPT96pglzIM0iRNjRPC0A4Ue6mRF7VzaARCXARmYPgXtFWN\nnCxAEKxEkc+RmNEqlrx9AZrYJNlxOgYmMVLcCjeUWmMG+EIlj+0i8hfKi4eq\ncKpq\r\n=KzaR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLt/Q+gwHFhRMIy+8Op8aeJMcmnup+p6nM/Zp1/gW4bwIhAN6+V3PJMVm/ux6Ljem6d45GSM+K/GBbrfR78v9lpjUi"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.39e9a008.0_1588212805162_0.399235077612732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/top-app-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Mfs26Faibj6+nYcmEsDGYsrq9dY02KjbzLxoK17XjWtuhAOuK8qmh2FXprX3UjpO05J+0LbM3A/GslsfIXoOzQ==","shasum":"ceb4246cdf84932bb9c54305956efab6d3622e02","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.f3b365de.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovfCRA9TVsSAnZWagAAciMP/1JrOTAeXm6M1LtqZEJk\nw9TYZUzfR2nXDHT2iPCQeR1Ywa2p7tuQy2BuEWVwH0wnCQBi0jk4I3WlUANW\naCOFbVJ/CEuGRL+p1orsP2b1z7o7EqfU7Dn4KQb5JEYbV5BPxvhuF+jda/L1\nBtCGkaFwri657+IBPNNCc8p0yhPtc4AUqiwe38cgZLf2EDMQ5XQGYiH8lXmT\nBj/A9Uxylhp/gHo93N8LVlBGh0k6m3q+SyM11OYY25ymKSrNNdVef1KQVcqi\ncSOqGycF6myMNxIBN+cqbuXgemltoPyccuZk4AMKTjX+QablXxuekeecZ2+0\n8IWKfwxgI4q9mHr4ayngGDZUT0rKqCK9/fxFXiSz8zTYS7taCAnPB7N2ZFpn\nNXyhA14Vt+eBldOw2RTlTc0GG4mFAZwU4pTlBn3wJVD84JZumLYHOeFGP7/Z\n+CbMPF43gikj+Kvm9qyIXEc/fiup7Kt3j0OSIg1NIddcuzK7/ywhrVvbI2AV\nfbK/rnjYnXzf5xCf2Hz4U8u7Mf8GqT1NQs34VAJ1gS8rW6ZrwrHH9Fp4UySC\nZILS2N8YcGESRK2LAZFKaYP6NJLtrm/XBzBAoe9eUDg6K+J2JHDrKMtNNpBA\nKVIV9muHTRBa7LNbO+XBg2uhzs4szbCRVDz4QHPlQkIiOsm/OAiShG6ls73d\nHroU\r\n=6p5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjMbxJUgUI9v2OVudNvaJhqQeB1SJT45z1T6xzjurSAwIhAOuSYgzsxo8A/lgFrEof2AXpNzHm4Be58AMa+ZbrgU9C"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.f3b365de.0_1588235230975_0.07515241217867796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/top-app-bar":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mc/yhDtYn5y9lsRDx058dLldBd+VwuPa18+QJUPtmR2fr7EnlZsHWgT1d+N7dDfzGIM5zbiwtP9tcJFsJ7eN7Q==","shasum":"e7a9f19ddd2147c59d30c843d9bbc27bbccea418","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.cdbdf807.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2nxCRA9TVsSAnZWagAALXEP/1DHPHOD38B3MUMlxmD1\nHKqUJfpz+t56dic1MxdmJsMo0OJnAbrpOH3KF584k96TP+QWJkjaG7KW3yxK\nn6DxICVEOVJJ9StSUW0mk3M/LcPdIIW093L3AM3EXWP94oIvwGz5+LQLKfEZ\nKFdYzyMDMbqDZdGbVOy1KJ7tryfMvJgkS6u34LHLGOKfCmo5jjpI+etdZZ/t\n8Q97fXmwW1o5ehnmJ6ZyKc4r3IVKS+03n2hV8WLe4wsG2yIAOmLFnX0o0fBw\ngzbTmSlHXTZe8pbUF4M9i1/Ox6jn+Pt9z3p5L6mMjfPKA+TmRgLR0aJ5WePR\nfej1aV2kbH8vrB0zpYG1dJ4yUt1yuzO5N4maSaLxWQ2/lOwTMljlpx4MDVcG\nfb7XzqD6iaudnt6Y3D3oEEdAJrhjG5oXplbtbzu0nGskQaWFdPWAgMK3HpyK\nj7NqK6ARjF3qFZO9Fv/e9/dL7iYBZPVmsC2VtN9yOr2AG6hu/WUKhzS7qoNZ\n7AJR5KEUgJvBhLPDjvfDcYItmxbg/OYPmVbDODgtgSwrH/Gujgb9aYlsSQmh\ncmADInDGY1AcfQtHqIFK+yFw6nrZe0lSjIXyCgQF23YZUs/vFFkFRBGpIaTA\nzZitob4rtqeZwDthp8CNKTI2Z9tnx+lmwzzBQcFppbzdk50el5H06yKVBQGo\nu6TW\r\n=s96V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfDZr0/T03pvov3l1w5vI0K3X5cxN7xgWn2lCPD0yQjAIhAKW7IWxN6NGmuZKSoH+mnC0JA/Sf6SGbpFc91GLBXFWT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.cdbdf807.0_1588292081333_0.3310981163736775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/top-app-bar":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-G4T2HVBADEkTF5j2C169QUN0cIT8df5EAVEk0Or9HKwjIyvIdBTJLC4+PZUH+fj0ohL4jX7tKyJFWK/HpEBXvw==","shasum":"db94c3fa3c39cda523bf3c9f6231bcfc6346e1d9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.9995ae17.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4sCRA9TVsSAnZWagAAU9kP/21oyIJcUtYqE1KQBFHU\nMeBPTuGqAJpNMbb61xsf+28AecBKcZoEXBUyAMZl8x8gCsgBWu9+Nki7r7d+\nSX6V1z8bSOCRGPuWykTo7W/VUQDAHLz70OrMTSI3WoeQKLQtDdLRc2G1gIo+\nw8DaHMnStkN9XBlQAaY0l7lEgnh8ap+M5AY7OGjmHQ7Sz4gQ+F8Q587fpcJz\nKmADZEPqn44ZKnrRnZT5b2P5VosKuzq0lP1VNrPJx8ngob8jPWi+ZsQCEnD9\nTn9F0Lam6MClub/KVeWYNArgFBecVXiAtBFjdJ3JIQtTh1bL0r1vH9uakvyy\nzcr3dWSOEcPRVyjTWu+f6KWjsL5QzmUhj3o2pAWzAsAQlIvy1X5pqlX2+OGL\n//0KYtPUvHJkjZ6K/pLqx7+A0oOaDRErIfemvIkhjHNLfh/1o4X6YbJSgpZd\ndWKL9iWi1FZMbHHUlzfZzmM8s7xwl89/ETLZyH/0ekQS2E4y8H9v0IjifyuC\nr7IWEZRQDHkTtfT0FC+Hz7eMvuwhO/a9R0YIFBzstTJp1pba4985JDO0gtwG\nBPRz/4bAU0/PZug7dc5MgK7QjCyuU+zn4JwVuN2JGE2fPWFkmDSF6yNcL1AS\nvRmIk/T2ipjNzbLVK/tpY46+0nDDSiLxbw2IfLX881EWNaYmhB68VvsjmO3U\nxpWK\r\n=+RT/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/GTAWoi9gAtE2AmAlJ+MgtHYpy0C/VxaPyl7t1lkxnAiBwq0LKAXPlrl3ovLJnfzYWI30F8+4V0F0GhVZbflJLKA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.9995ae17.0_1588358699637_0.369163709307069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.457bf035.0","@material/top-app-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ptUA8jqqlX9US7cA54SdbVnWGsgt5ANDKSeZ3Jy+Yupesp5KnXNsYZ467Q8QOcXoqMztU7Lc/TnscJMU5oJTww==","shasum":"f7982cef97fa5ce7822452ebac50b5f62d8440ef","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.457bf035.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIumCRA9TVsSAnZWagAAupsP/1gnITSHEr7U26QBTtuY\nneLBFVrU4D146crK/8j8ZLNrmaEgxd2tCiWKRSKaqgTm4VJR3CIxbmK/4GaD\nx4utLZ95R1yigsNfexc5XtN+X0F7j23+q9ml4/8BCHD+Ww83noeRrhYSBNzk\nsGhpMK5nPtCT43JBFQ4D3EJMJVXjw3tdP8RV9sbJKKQEVtJX08JZiDLOa4PU\naqA7I0+Zh/3eqaAFcgk5SDz64LC328tWJMyZHO5GnjHae5nqF6lAjE8EabsF\n/F9M4DTKHU9nlYZiOhH57Kenk4rvBXDOM2Gxtbwxg0AeaGaj5V0V+hw72kAA\njjps9rch8D3ErlEfqkuBhP/TDrtGvuCo2uNHTA5uFR1Fm3Ny+fZ06438bTGj\nepwRx4uDv1Q2BzALq3bFe4YB7rFMuGexHEh9n6iOQxd0k0tmSVpQ/GmHOFJe\nKEwmrqi6Bezl+RZ5Cylr7w7Of/9R0gBThDkwLdaFOpxtV8VsNwv/kdCfy8Lj\nBcTr7ON3CT9rQjTDM6ZBXG+DcRs0UTXip8vEb71LuCD/x77kuipqsfut3oPw\nxxqdD3ujoLPO7Tc3DDfLK62rrfAoixMPpEuZsMX3Urw9Pg50vGAKTPj1igQB\nwt3eW4E0eX0HTiT0tpG+DRkHwmFgxbCnas6eL5sk5PNDO7aWFbL5NAq2Y5X8\nZu9k\r\n=lyjQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH2fqqCcMDWxyB4QY126ML6NaQLikwuhhrLOn4bWbj6ECIQDJrdt2z5SDwQVHWbVY7U7kiZWLUo7wfnn8rXwlEf8QoQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.457bf035.0_1588366246259_0.05894716906624842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/top-app-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IIL5dt29IbxDlvwhn44EVd8oGC3MaM2cH4LsVJSX/+IBfdLfG45jo1CzXcXXG/+dSW6eon4xA6IAVqOhQ8N2Ug==","shasum":"42d1c7807277d2c9f54526222b68ac078ed25564","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.2381fd02.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPICRA9TVsSAnZWagAAn8wQAKGhkfCFDw+uAMuMP2AK\nDsrxE8hBb7cnBnCRtTJbdDHNaAMkNR79mqBy13ST5KBNcCutif0Gqam12ymV\ng1/Bpa3mFW1UWDiv1/GOhwPFX+WTdrEZMCiGWF/8DRkdmtFPkwamuSNjJZ26\ndocrr4mR3ZWPP1gQFOIrZWhDVFftQn9VIxJ73TXP03mXolykGOfJbCfCJZRU\n0BPA9lju9HPBR85MugFVp6Vjlv3kGiRa7EVgGLecCB4kOyV6GvAXxUGnD/kW\ngrDsezFO05VBaOVC75ZZGKk0gYAcN705xP2Gd0Zo1IW62chBCKMP4Bvsy4XP\nIdamWJZtQWFOx+lSWIazbe+K+Zf5TH28SrXsqB9EizJMFwR7dyz0hKcbVqcq\n/ylL7jivWcPAvtHeYb4f56OXLp1/eNp5o4W7ZzBcUs6uTcs7ktVsYBoh2RDe\nybsfwFSUX5iWQ/ORsHQ8HyL7cXqJgTZFLUiLsyvBZOuVJ0mD/DRlj3WvXAU4\nCFZpd9coy6toMndvo3u3exXdL1Y3ggkluPFpxZa42TioP07Pfj2Wa5fSnAer\niFT49ZYSN1fu8VJRLXLTlNMAwperg92aEDujU5VdBmO+a9DSfB/JiDqpSflw\nbYPv8jjkNDH25xcwe1AVDgsgqzpwBsEiGdfn54+AAlfTnk0uTB6tPXq9jFCI\npNPE\r\n=zeot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpO8X3vNdwTpgW6WUcafLZXjImJadO1YhUpqfyCElnBAIgdKcfxMAB7qMU6qmmf9fxJtVXUEx1k6lF413IhU1Dzdg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.2381fd02.0_1588368328326_0.6012621138976728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/top-app-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6Q1OKhPLH1goOvPNmzOuSAMBxhPUJRzSXAO2R2K+aiq7NrcZuaVFy8sNJNtcsdwlC+PH5hlGvnQBkr49IhoMjQ==","shasum":"005e80c819c030bda403b7fb73e5a98478f82d5f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.b2ca9b57.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZACRA9TVsSAnZWagAAFqcP/R4qOBd/PXcyn0YC54gk\n7DAoe5Rg3wBr4sqQMwgif5Ry4DjexkeMT2eF2Y3PjWd0xJehnFFkmyguMk6U\nwDije6FJiX6zaUyXy/ZAhnOAeFwgMJHgiGk5k0Ve8C49J/eK0q8WvNsgpxy5\nCt175ET8Zu9k1wRSPjoBvldxlEJaDBIhS8QbY2PoG0YHyK9ncKTo3sWHCFP1\n14V2AdjKSHWvPsXuOKsvM7R16h3gsnKb9XbmxSRh6M6m+KEGcE8T+lAaofR1\nBAZi7DH/hXY0WHmuPgbzyD37N+UQ0XeAliWRl7UZtGAxdZICQ+PZZkZw7Ntf\nHdKbca22/jjB1VU59GOIzGLnDgbyrrj+4BAPyHLHd7s5udUXhUMNOUH5V/BX\nqK1c1XGvgDDmdg66STOjXRlvhtGBe3OuMb6WxRWHSxT7qBOARz8MKy6iIief\nRz3dYCmUDL1F6G2M69Wd0psljYh8flASoPeo9NgRDwC+3S01o1lF3iM/PUWo\nWQ1ZmU18R8kA/MS+JT9vdi7vDVq322hR1AY3tFebUEwmGHW/WP9AbYokKBGp\nAIalQhxNyXGiPBwKFnRTCrlv0vxRMoyFeENsDN9iYwK4m1VCiF7E+l3S8WfK\nWXo6ZLK6TGpux2cM3Ow8ueLC3xzvmmN+nwGLQLRVuo/XZxR03jfD/zYd8xYA\n800b\r\n=SSgG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZYFwHIXBRxCyDOyW7l95NWt8DowkH25+d1BJYx2QYyAiEAtbbUMCjxY9KSma0TdGB6GS6mDNNIANK1fkWWLAfi2Yk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.b2ca9b57.0_1588368960100_0.2702504749782779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/top-app-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-70r+rirwjX1JCVHaPm2Nn+jujqWI3w4ySqfdn4nEMm8Hr6K54SouemnqQzy9M5zkLtLOso7PDPXICeSZwDsrcA==","shasum":"b85ffd6f1240ca4db22ece91fa4aa8c53aa5a170","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.b2b088e7.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKO+CRA9TVsSAnZWagAAAV0P/0BPauyUr4YpQyPT/VC2\nbEPNzHYvclSEtLhaOGeYhTHzbx7kH/o2v+o+RxPfVoKB5R9CwX4BjvtBGTEU\nGw/tCza/TOuaw/s/idU5aPSxsnQ1Lp/i2MH9TuGe/2pFzrHR8bEg3EDFc/UX\nVFktyQdhH5UVA9WBz9QCIOEu0vVeY3+QX25QIaBzYxHpQ2GQuzUw+EkxSF/O\nBk06xovKg+mbTBBoc+33aqEvoqfUw5AplCc4/GuqHxNuhD40ZfuIT6HhnY4l\n+vzyy8DNU3oIVGHcsGmN99jw2pQu0HKXlo61xvgrdZ44ONaWgTpq6TMlunt8\nQTLePfcLW1937Yd5+alb1/r/vXbQMnAQrUXRyp+9CFwsHvR0lzGCG+eNNof/\nc6rrD0Y5RahtJQcploI9ofG7Nc6w/wR5hyXlWkSoHFWAs4nk9HtMdtskTaA9\n2JKspng+oawzlqPqljk8Tjsp7fgoLU7DEhMKI3saCoVm7kyLp4RnKbLbYBto\nOCQVaFikIfhNzCmGd9eVSxRFlRPtoJyMGD3Wmpu4xyQqRaJzt97o6urbwSux\nzh8vQlZuUVhDMS/3zWdVLWCjhkO5kv5CrUoHcr6QJL8TZNxrclshFXgIUQeH\nlr10LpPMIoHoSi9wfmkaTGP8yeAGBqyyIms4uYZvTkYJhVhjuSOzBWsXOUh2\nHLCd\r\n=i+XN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfPkMJghe00uGeo5FHqh7YY68ryI9PzDCmrjaUS6wT1AiEAi5SIozpEwJlpYAl/s9I9wqODYar1do0Gv6oOQaYbjZ0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.b2b088e7.0_1588372413963_0.4435156238214717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/top-app-bar":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2Uve54IxrcWEJYKKfPJJVDgZHOgAJgWrug7YSZa+QEpi7I6IYos2QdHLDtJ/ydJMIyczb0iJvSjr7+FGh8QFng==","shasum":"a9f64b2c58572f7c100d4696c7e71987e3e32138","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.fdd8f69e.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvcCRA9TVsSAnZWagAAR+4P/RBW8BVzCpa4VtdoVHGg\nC5MrU2K9Nv9pQI9jKXa/9iLtjAgdjmvRsseKh8FMYt7B/Gy2Si/yFHHfZmXc\nI1MzezwvRJHTzVpxXuNE5GNgBM3bV+k5fXMGTGY/AKfU9DJvA2oKJYrsnexa\nO0RQVqjiBkRoaXY005pkyZKrEu/M+3r5cczEYYDGQGP+bn2isMpbfx4hdibP\nteXam8DwA2domLItxuF5zqIdLTypxtSlymDtaMfjxb6F+cqWBj6dDj5Apt7d\noIXQ49zNXiV76OH92jiWvdiiqT+ag1BEEJPuDKsWe44TzkJgKt2VfvBhh96P\nducJRUx/AxfsScWy/g/dFm+EBawWqwIsusyRU4/qJI10YUseCr4TKXO13J0Q\nI/gGpD82bRM05nGnvhgSQX1RFwOoberYlHVPvMqf9915d7Z55NZbTaYWTXSr\nhZCnVpmcHu8han3/heRq0ibMfewKUR6cP92285gkzG1L3Rm8SJMGDoecPZk1\n4ttMNYEr6Nc8Wrmjn3pL7IETXri4nADv49XVxXoaeYky+TRgFl9c4lwLvw7d\nqLJVgORhNMnzJV1GIQgQ81qUEMQOT28H7dxAwT2uQQDOoE0K4qmLc5g8t6F1\nqiW8QY8eha3GKlRGugx0khwoimOPZXS922V1aY5HHR6Xn/s5V4AduqGQPxfM\nfOmi\r\n=qx48\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAo5IeE5gbgTpXy8N0bf5uLQTLmUJJ7+kbZzebPqkqigAiEA1neOfvfhjcfI/DaR8tnfiK9tkwYhiz2EvY/2fxx3Th8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.fdd8f69e.0_1588378588490_0.7361502004858289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/top-app-bar":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0097QbwdrWHU2yB/0TOtUeEUut8Ees1YYm0Vm7ed2RGW0a2gMI0mh9HEVuhg2yXR8Tg1ONUOl26e6xEDre4DQQ==","shasum":"a747e93903347df7102704b5166787fd6f293d01","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.730f45a8.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1BCRA9TVsSAnZWagAA9dUP/01kbk05GiJIySZXGykq\npajz9rfXqmXYLOqcssG1H5IjYIMmqGXu9vN6hRBPf9XtiRkC29S5qfm8Rnjz\nCeJnh4qiLsVevn1x46b1ZYKfvfyCJtl7jBtgcZmUJ3rpfETCh6IwGQgj4lcP\nR5jv8vrTWX2Sxfc+oAjr3oH2ZyiDjUaDNxRySWyFq5Q0iOq6lu57mZwROKDT\nYTdp2x/wz2kiqVOgv66StnBNFiDV8XoRH30hm6g1/aaT3sGMQAzDRORrIVcp\nV6Vn0RICuef36kRW8muQwUxC0je93cMa3RGLU6/YOYJvSFnezUEPvuhwkEXt\nj41pGe6UzOJCN6r63Ejg+5RpYjW0Ts3JS3tp9jb2LIrYBLD34+GzxFmndO1i\n8E1eJB2T0Fy6oKr/gCzdQqHFmk82s8vkYmplBxBKFs6eSvI3K3d+lGgakRKW\nvYwXxoB0BFJCqG1YLExxRRPo7CDZh5o/gyArcDDtAySXuxaVvaFPU3ZCG6ot\nWV9crH6OXgEJSIx8J2mgKdtt/ijuei7uCAUMHeFdeo696AfVeGXt+S6ESMrD\nM9gMjYcCspetms+62ZLyNAPdQNEPuKXkgojOLaT37/zLEwwUErsveDQV4CIr\nfECurPWby/6Cp2FAa7Ed3BpJVRbP1WfSJA3Jck4L27F+J9Zk+TiSMGJwg8Hr\nOqgQ\r\n=B2DQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9r5eHIY5w41zqTruUHQypQj4w2ClvyIxP9l7JgMO46wIgKV+eTb/6hyEXaOAk4mQgIYwXNmCUPyTukM093r/hzhA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.730f45a8.0_1588538688742_0.5113183371676895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/top-app-bar":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mQRlDtbizCr1+xNmNx3u1RsjSY2Ne5L0PTtIa3DSla2XzTPvFgf/wnUMfOjatYnMyDs/AsW9kvx/x3AYPHJx0A==","shasum":"d9dccf3ca56b67bfc3a3d7d5da83dd52231c0597","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.4219bd20.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKXrCRA9TVsSAnZWagAAFHkP/2i7F1QElzTVPpZnzCpw\nAIQx7Ipzj3OBIlhK5tQ/fd72fj8gjRqRwcp2phpj5ejBbqy1cezJEB/dk/pZ\n7Zh88fm60TxMSKgmCuMy9tvt0lfZi/YHe2AEeVwVXbkC2NwmA9I28svhFMGA\nhyILSHrIbeqJlDR+AgS48LqDJpw9v5cRIGHFelAYdyOGLSXeQCSqXqk0Jn5T\n7avA8rW1X74c6+cpdSm8L+LKXe8+mu8Q0nGQF7WNhX5LGHEerpHReiwPwyOu\nOEq2ChqC+RUYGe1stQLuRBKIqtt3I9r2v9t5LF5N/K3T5Sti8y4gOCSxKTGm\nyXFI8TW3tZ6Y83DkXhfFNxZPzgipBLDFcGYALylGx8XE8AA9dGb9tPO/Y3GE\nU72SEpF2jEWmtT2a+3Wqb6d9YxkAsyh/boAn2XQarlACiHjfWWKWUUpGseJb\nA7REEHvEnrHZRiZR1CNKJC4SuZyo8StGvT5CfdfNtvzQFTn0wjoT8+i+Xgy8\ngBg9eVle7mrgBzox2QI/7Fltwwq/zyQU3EXOuNiMak5oL9U0obApMhckprDE\nnUfA2y0nq6WCB+1K6NuDhoI/e1II8DyL/TODobKevxCAp/8iAhjlp6766K7H\nuUL8A+pAJu27W7s/Ri4YIJvUCTMuTTI6G7m6G2uKoye2N4GAeNThGqv5r1M2\nBJqL\r\n=joYj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ1Rxksixt9YgfLWa5hffIw1s4NU0QhVk/m1iHMl33GQIgAWtqvbKgqrflYeyYGACQinNRgVFEz/yEPreqB1dvi7w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.4219bd20.0_1588635115409_0.7334218816714035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/top-app-bar":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rWzIKvDyd5SobSEkLo2OIU0mIqX6HBDNBjtvBWpX6Yk9egVdoulwgt7NkIADWYw7t+wSYk1V5iMiOnGIDpCRSQ==","shasum":"3827380528bc15fd1e91a98ce0cb8fba41119c48","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.1d83cf6d.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5jCRA9TVsSAnZWagAAQ2kP/ArylZDtP998CrkBVFpF\nh0W9xMeH0xU3lsun025DhTT0c8wrw0Ts/FUKr7/UhAta4lEJdpwzQQxhqdTN\nSsBAQzrHyKP6tciP4wJZjAeO15VK6VR9ZME3lq5KD+gdoKIYc8rbfc3GMuOl\nTzO7fuetekEESssX5BPBfAtY3pPwywKw99vHTC1Kmhgm5sS9MjDnNzWy3nLu\nX9VsLhdH0jXoOhbNxZ30qOX7tps/cmluhniVYGUhSdt2dOgaG645I9xp6jmX\nAmDHFx6pnuhQu3tKMp6HZNvuZ+xek1ERy21qvu+XCKj0Q0HAkYlFMoT46TVX\nQXn/6WX8JXiK8k22utG0QdXoiD13x0BbdD01P6+C2iDvuvo+lSiDhSsFzUhE\nWH7ME6s8Gmd5AYacfaXuRzLrEsCn3HVLUFZRyic/528yQ8aWAQtJtcZ2QLPk\nJl99z9KbEhmGrwRCxjyhenYSGnl00fsOeB2tvj3szBgN8OH9eFdfCK5Hx857\nZ6X/TkRqbP7MZQLuzPliqggXl6HhMRRDvVvLZ2ytTOet4s56W7SHJAcYr/55\nuXQq9nHz1lI+H68K5ODOUx8+1AzGM9dCUSV9J/hAlfzf9IHDBl6/M/i2+5ZP\nx7t/xYwCInGHzaKqL+4UKxpiQbZEGxLtxm3CvokHZnudVJ3HzSvp63bfMq38\nD3lj\r\n=RRZN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZZvUBgCBiFmjufZ+RxDuuALRMsRSKP1AdtGhXlhN9YAiAJ7Y1MEh2dW1wSaurZ5nUYU1V6nG/Nkl3o/vR8di8eXA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.1d83cf6d.0_1588698723416_0.2419205243446425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/top-app-bar":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Mm7f1LwpBxy/0HnYOQW8pvoQth/CUxq8+ZCx8mP8TIgBL2PXM17gshRS9DlR3VYJx4QeQFGq8PBrCmvuSaR49w==","shasum":"7aca90a2aa3d3ba74a3637765b3f7829d2c194c5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0-canary.3bfc63aa.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazUCRA9TVsSAnZWagAAcy4P/0mnMmk86Qnk1UXEBsvi\nBUpc+Z5FO22swFYaqJ+jSiQiiZ5esskyQmj1LWt/cNI5Y6zIGv1k3jP1RM+w\nYHBFLn8ICylNnx7SM3Mmos0uWhkZFL4awJ7eiJ0G+S5klUlIb8LvAUMFDhNH\n/GNS4orkh2pmtSWyCovqQgQ2ZG4PfaBltLEf5Tcyr3q36sTxILqxnhzYUreh\ni+6W61VbU7XSuBr0zBugEHJW/8VtO6dp7GJ2SBQiMK83YQe1YrWbSWQLF+l/\nQhqy+SplQ+mlA+48vjZclTkbf50Qd8W6Rg9uvnS1o8Bvf0BNePjgHllTFdWX\nMDQqY3uvs3PYiFdN2ZBajv1bV8Utt/UUH5wbpBHwF9XXvNoGMgQ4NAgv3r0t\nfUghdwXtenYQHazRbdSPHQSgEqKJB27rfujd9f6F6oztrgNM8Mm+5Vib/a3y\n3sqFkbKiiRDNAOXS9EDkSOCjzdKHyRapKp+QJzSo70LzOsAQEOQ8s0Qa3FMa\nusGBhl3P4ohoXJ5iKc+bIYON8XfZrV1dbu/+V4rMIVLyo2QqTuxk/PPmqEWo\no6o0Dz+lSxWCOq5cKVQ1rw1Rtjpjtj5eO4M/wYELcpRiBqETUgj62yGDGsMM\n5cKHaoidu/UCp8KUFwDCYJkCdooCribPMsgr6ZtF3cBkPJYAa9R4DQyj5kPB\nQFcP\r\n=xC8F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGUkjUdIxUuUM9wJGroHuOhV3/aII3S4GYvOUbpOEHjMAiAMiAA2/3OYpX5pshDZdrqw3MqO/DDBAoUTtc8mcjx2YQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0-canary.3bfc63aa.0_1588702419833_0.25458981894937827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.15.0","@material/top-app-bar":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.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-top-app-bar@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-PioUyCIP5eFtCJBQWMDuND4Bt+TOQbgdsmNCbwq10aSyg5j9zh7q0hQ3N6Vwvb8fpf7N91BLVZ/qZB2GSEy+/Q==","shasum":"9ec5a240fca0bd814382b21004af61b3a34ebd9a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.15.0.tgz","fileCount":20,"unpackedSize":81813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepUCRA9TVsSAnZWagAAbsgP/3oQWQ0ZStqBTBy2ZyW+\nJtAXvxNpUtXVvozwrtI66wqM1T0Zgl+q9NBO+8Cq1tRIWcUzRYNdC23Mz+Ew\nwxokbF4GHCPxW0NG6mfwG7wlxjGmPgnRk7Z+7UFsAffd2okdXxNC7bWtf8oT\nQdLjE6tjXbXPUqtWJMIK6xWs6/nu4XWbeqP7GCVx+Lr/flXYzA8h3KaispnK\nMnpgUW1NWBnoAG0Laqd69030Z/4rnD7ROgl7yo9Na74xfKLFqP1jjzeXdR2G\nWlxjDG8FCY6D6BYO8Dsa7+q+pH3wuaTTRmH1Z8PxrNf2qS1IvH3K6sqFllS5\nxArqIar7rLeOcS0lTxZ6/HUqMuWEGbRZbxdZdXsUqtDM1dOIE+2a/U5ivtj3\nUB99N5y2lDD7NGJ+fai2JcKj4HX+ogYwIKtPQMaZFlmr9ZDLj4G/mdQW4ZBn\nE6GUSI5q9igvfkd2RmUGBUOZYP08l3yy2f5DdWSGklCyNirpJ7aC/Wadk3W2\nDrgg409HG1/0SBA+iSFpg0xIysYg7xIeKtCh8JlGJH0YioaBOwtsvfoyivnl\nYzWlUMu3KwUAIwS5+z5uyxsOA2sVrXawS+zatNshwJPMRHmL8FwgrMCAFSRK\nx0DAcgeUO4PftikGs0xNk9+S8SnCp+ijCR3ZE4mw1g2EYftWH0e+ekCVVdlq\nYGbu\r\n=XfDu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC04c5NTXTGyw6dbV8Yowksndh22q55Wol0gePIMDSVIAIhAIGfb4+NLGhktmPK4F3bDofduYwcYtiXA84415uUuUnR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.15.0_1588718163887_0.6539839750549872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/top-app-bar":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Mu3E8tI1WRNcVmDgV0e+7jcOoyiPKpoyE0MsGAQJ0RFloUr0psK61OSNzQ+l1kvOO3SXmeDmE9sdTyvOeg+fDg==","shasum":"8615ffca1f0077bbc1e82a84c0613831795384f3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRnCRA9TVsSAnZWagAASJ4P/ixlfaUu9U3/pt/msvjw\nNCjAfRzBXk9a1TocB6hezM9F2ycnKGZX6+X7UrGjsDbxNo1fVbXtXjEI5B8r\ng/YMkEln73KfO5CWHXqG3j4Dt4GnpEzL7Quy8CrdG2ZCn5AYOjk4yHmLmesM\n1p2DMQOrfRaH9n7dXfYSl6aoFQcco7j180ffE+hdn8JJ5qsK/6M5WkVBAYlm\nSjIPB191umDzvSiU1gX83e4zUvSQWPjfaRnhpLYgMz7+ybX25dME3DiBN+li\naefMP6kUsZ4+UuaIs6H1ErE4iZbeP7W3WowX2KiKaZXmalpKXcuF+n+GjWzu\nV9/w7SJJsLv7vom/AlUg1Mk12T2tHya73JOipw0wLWDsM7nfnIdVrkpG2EQG\nFPbK0r8WVS5fdvOf3JhtSW+osLYuHOLfz5TWY1q3vfDo7sxP0f5f3I5Q2ABC\nNrzNjROU5Otkpp3tafDxwqXIx9Qp+sQyDz7gmjDU4cLY0q0DiHXaajakMAOE\nL6G7817+WxFWSZhp30mnUlKgngzdeM2mZPLnJo7Pc4srPzAmPUxK7xmcKSJ+\nOgyRbAATqCNCnJ2mH+4oNZFr5Q6ddvKdEw7UMMDsuEb+fyfYIDlY9b7RtmIC\nFlhWRzDM1gsM3Eh+a2X+oeuv7zdo6dBuQwJftSF1QnOD+kc+9H7DBrPrVtXU\nChbv\r\n=digA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgJc/pibia9gaOMCw0ChbwTEImCarWmi/UkiduPh6f/AIhAK9E7voY2EHG1H2On68bO0lzS4DNwJcHwcpF8BDfeonY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.1f4e3d1c.0_1588802662670_0.4382884860925105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/top-app-bar":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lEDKczz6o0998mZXBFWyysJpnhxAH0GnWrOw4Z/S9iSsfFgiPmKyNey1c70Ir8RZkwtvSOV+tf8n40ho+NsAxw==","shasum":"ebf62dddb860c9ea5501c4ba413559206cddda3a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.bc8759d5.0.tgz","fileCount":20,"unpackedSize":81848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZdCRA9TVsSAnZWagAAX/UP/3fUel+Apae5F0ERa4C5\nHya1FLtbCbTpInS00wGworcMmD7EagZBzyXkv88vRK9ibtZp9kGQaRBQnraC\nhmz7NpsWk6RT6dphN211e3LARIbgZI1YlNu4pkSRoXemHZirR6+1V/2ugRlB\nCFWBTYBU+fjGDWU/UDNalwlO+IPZB0xvbxvUY4WHjezkCQLwmitMrNx2kw4m\nvFBvjaco6MOdzRpHWYm583UjnRSDIftGZGEe3iDGOFFuyTb9xsoemVtapErF\nn7QkWxHFh5S7qQvVmTcchiwan84boH/z3pqZ6H4d/5vVur0WELJytRwVakJ5\nNuUyaXXTm4hjR4yC54ueu2hhH1eqZuv/wtUG4Bo/n6NO6K0BUi36RWd6XQc/\n2oGo88BVvyymszXTaWHf3LdzG2/O1flDduMlIJkV8eQ372C120Vb3a9bPp2r\nt2LcwYj1Oe2Uh3Ldu1WUdawgGspl4IqmpCB6AZsWyPIgxD73rt5Z9yVaRdPI\nxw2K1RXTiGmDsgd3z8/HHHZXwvR6lvP6b1ImlIR+94DIDC6zi5pNeZKSdfbh\np5KishtaoDBjVRIlx2Z0+dfGl8jGptPNlY8E38CqlbAU2i5fOAywH/VRP/ez\n11fbwGmpUbzbg1fhPdx4Mw1tlB3RodYo5/pCqmmr317ENC/sYS2hDLInFtwQ\nZjnW\r\n=Zzwg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCY7wGSwdwPrcTA/uLr9pwzzfvOftp3G8OX2PDcORlXAIgEzZyfivpxxZoMhgDk8RjDwQ6zji5VWox+2j0ehoQjUg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.bc8759d5.0_1588893277399_0.31403993327195745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/top-app-bar":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6Y1o3iyIXBSI1kq1hb0DuMxqGjQsSonS4FMR7qXNmYSCn1s1lbWBiMp6dtH8Dg22kNkcdJ3bJKNO86OPy9ND9w==","shasum":"1abb65feeac5d1f5938f596c1aadf9325c83a084","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.d1379acf.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZm5CRA9TVsSAnZWagAAZ7QP+gJrYktEt8Uzdk6WVOqj\nJtUmnE+m/gdFyD7y9Fmtxlitpj4el1IsTVJGbZyf044tuatUqFPTRVGNJ2fh\nnvn2bAbiNgVhUzqdd/ySgc66c0CKvRIU5yE9DyaYyYDXX60PAOkyniIfFKS3\nwelsi/iS3qpOVVY+i3BNubJRTO7xUXZdNkTgBy1LL5OXrT7QE52eFZVKshyv\nklGGmc5lcXuHvTvJ6GWI/3u0sy9a8wG7DrFzU5XAW0UnF3tSnz6wDyzbhroY\nPr3LzdjVjlZHoGUSFcqFmHsKBXwjSTEL7gFwLiyY7Ci8jgCFr2PKOCCJWq6u\nxyKeYxrNy/kwZTYTsqi5WasO7jqmNPwDKofGCmhPqRYV2THZTdqfpJDxc1gF\nVb/GmvhNdGlw3CDJ8nOSkW0T0P3mXfN2s6w1aCtlo8E1P9a12Z8SRzi4Pu9C\n69JbtJVj+lImyLmdSo/Z+RkuGzhY+eAA+NUgtbPgSsPjzyJVDElOUqxAtk8v\n64qghG3/6tVTeFc3fEEehPj2XrzhvXr4mUGynANV+BKlZ655wo5Mb/z7JTPC\nQMCAmSg409+AXfCH8qlfDms/5g58YLevRpUfSyecrjsnEqTBtw+b1Ta5E8nJ\nevZ7OFFm3l2/5qL31W7jeCNn6b3B9AV0hiSVVrtULF2p3KLecXuqLqHQ1iZ8\nc/Sd\r\n=pRgb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAO7Ly2Al0ym9myajwVHrwaAGLrNgMiBUhkEChLYNaXqAiEAx3x5UHjLjJnn3xpGMdmjkVrcORuOzaGgZ4X+H+MWoDE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.d1379acf.0_1588959672808_0.5806836486112468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/top-app-bar":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kCmAbFjTlKgubKW0ZNZpl+SNnesQy0hiiS5BBLl8MYE3lwzshStp6AKQIHvxkmBFEp4+sbd1fUJY1DKRzDkpEQ==","shasum":"aa4ea4f7ce6dad24b324bbbb190bd89fc24456d5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.58d51fc0.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBICRA9TVsSAnZWagAAvDoP/jm7hQWgjttIEyWvbK5j\noRfdsCayol5BUV+MRmzF/oQ7YkQmEuBf1jDKE36+slX0CnBQ4L5CAoUErezP\njKYfVaSOu2fRMR6g9gijcRoXbT2uQx44Ocbr1/P0hQncniDEWiBd1YnNFF9I\n1FiNijqOjIQQOLOcRejTSVBcElb0nVudp121SswwjDQpjcONeK2/vGtE3wqX\nGuR1Hq9nkYkU08frp9k6EAyW9no15u7YE5Nsf6l67KfBu7n8H7aUbGip/N9Z\nEPMkdX1Owl3i8XW8jiHFQwENhicb74mELuGYNNkL6/EMYMpYfPSIKRyG9v7A\nMQQ7Mol8uSPz7AKVi2E6MRNiKzfQK7lzfKWlnx56Agd/MBk2MrWUjFCdxqN5\nV1z+eLdBWZORCfpP2LHQTUCgfN+w8fxNcGoWVwer+5iK8qu/78agWZjOvUgj\nZ1mPdWguRjH3OD7sL8LcapRkcM5B9AJ6lxY4VML0Yqf3N0NgEPtfFbs7HL1X\nawkq3Xt0BrKSEloLyWBqjBW/2imE0S4NQJmzQV5pLWILxQGnJKc2ecphBaxa\nF/LZZyXV/K98ebkJBT2h0zd7p2lAyeHziNYL/r+XV7IXxv293c/RIkPECcHD\nRFcfBJT0+X5a/RiGkZIZWYqqL8Sg5ouHEq47qI0oekBbJrLBsXu2L0i+Edcg\n3sHf\r\n=JHGV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBi4xaFmMe3gxXWoiEuA1/dtX7zG1lpTV9tRE77JvV+8AiAbq4T+Oqc6Wx7RDMLuRebl9a5mF2S6aFB3fY3fqmk5rA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.58d51fc0.0_1588965447866_0.8790693238764329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.588062d7.0","@material/top-app-bar":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gfhzjWdN4Oj65pws8p8dNBwdMTdXCglalcNv+L5q0BxIHtuw9XeY/bjSP8/D16ZiWSfSuy2OY5TG54aDcgUqlQ==","shasum":"30bd52bee078be35ecc5f0c31d90dd30ee4223d6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.588062d7.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3aCRA9TVsSAnZWagAAbw0P/1LrQk1k76/nZ7dbw9Pp\nkLSiApfexBz2gSDZ/AFe5YKBZBPbn36aiFI/3P7FXm3o3l46+N8xVMGygEao\nJCQe6QwACOPA8Q1NaIxiGf3Yuf27GKnch1L5fhuXq2zVEUqGC+WCD1fpcGrm\nDDVKMo4CwuvEoZqtTrYxsFT706psE3EdeXg67VUNktIi7kiLPOfae/ZtwTHk\nxa2EUABaXzojm9MpkkAWid5F2hwK/i95CwZ6ig7B15b5BfaR7ElPKdZmMsCG\nNUSTfG9y7B01cUaGxk47e2WANrlP+/6DOPxqR77EGL6BdZOCoiK7a+8nkD45\n0Ra4O4IreQypz487yTxDguxcTZweC9PKzMUE5pfU+hmhNJp+pSCrdfyFx6Gr\na7OGRZ1P6NREW9b6JzAHgZV9Qc015J/XIBKCTN6767tzFXYYYXG62pQtihY8\nyCqVhNlhkkMdkFy8/oXNn5mRBdkbDKixdgmXK/FlFty6Crqtva/Zf5E+6fiM\nIgGQUwfRg2U8wGj5MmkZ0Qo2y/+MBpJRJ5AldFpbbckKOfk3PQUIiv/2RRVU\npKlJdgD5ym2K0rL+jY1xmtQkxLcxOvTqHQtFpGrGnxujDgisn16h5yDeKfpa\nGTMCNCaGkDlTLFXGR8hveZlepEwLQ3qLAw5qEoaX1SokQ7vmxl3EynntVu9G\ntdsp\r\n=l94z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3bmvAUpVFlvluQ/9C5ME//mpnLbaMWPtZJUG4jO5oeAIhAMJUb1EaYkzvJ8VP9ppAETrdmoONG/xysSHJrD2hCPzu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.588062d7.0_1588973018132_0.6406652351331288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/top-app-bar":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3d0QpL6OZLcWUX5TKsci761RF8t3Q0OI2Zh4H1rgcAlDejawjtgLeRus/kB04fCK3NnCH3qZ5Ymp2y6w3uGQDA==","shasum":"f2380110b98d0116a872dae9453ef3594c02b75f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.fa21f639.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYuWCRA9TVsSAnZWagAA14AP/2RQ7U2JK3QIplXAAwuw\ny/53hA7DIcG6yBM5liqrPhv0FSN0ezroRTzuUzkctMxhJL2GS6NhQwOOpsQG\nPOmb6EVSStal3sMo+gaE2TBIeMOGMiqSJOhuWcb37aqYU3ExNKkK19oxfYM+\n1dqj/D2+IoVzKobkXmilp2ggEUoSwTND5rchGQYkAhzHYOm7s6gNYDqotffY\nuiSko58258eUDUBAmVQJgA8RzZ8ApHC+C7b0TvqyLohXtdKvjs9GPwZDAalN\n5Es4WhJqBBp8CbN5E/ff2W/qsxuagKt8v9HjSl202SsrIuzS6jMsWlY8zRlt\nSHaYo4OLLHPWtxaPNdwnc/6/wWhsvR2GlL1FMZDXFxDkD7xK4V58iUXBPNi7\nV48Bq5bXM/Ovvda/uCHDqKvD9iq1S4tVRp4apeQoAXm5LFJcMVzzGcuKOfhi\nAGsHUYwyCsqODZvjmrilrgY5sUDCp8iuNnJqmR1rjPV29qrDmudbDTIjaVV4\nvCnfCmOyJddi2Z+i1eWbgtcrOxu0G7qCelvHYdBBceRebucW595aY0Q1+sHh\nBcHZlrkRcrmcnDCpgj+sQK1WONjboAj020s3uQc8Ip4onjfXsM5NXuy0Dqmw\n+sW/1pY2nVnAToArnUlFeY3mHevZxSzwwzSrxqScibP1QC/7Da5SbCBZEYXE\nEbNF\r\n=w3J3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPFxlfaDxZ5gkspg69a0gvxxjnYh0N1I3OrngQlDPoqAiEAlWjoXWEgJo0GGzCOWyey3KyCI7dX+qSOR+Qn9PkTVmw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.fa21f639.0_1589218197582_0.47305367540643695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2772c509.0","@material/top-app-bar":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pZxsNG4QxdvHqQ51xKdRD02zrv0vhKEre9v0tASJ4jhD2+SyPIU2lrxiv5pKMZup53IU96OVs6NSje4Ibqk9Pg==","shasum":"24dd144e89eeb4c169f8ceb2940247d718a8862b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.2772c509.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZsyCRA9TVsSAnZWagAAgnoP/AvDZCekNRcpQfKXv119\nh8yDQWApduMaVafM0du3Dz8XA9GudIHQbNsGZAYj0S6G1WR1MXfKBP1sRthV\nJqfELWDJeE6EJvFLkQQ57EdU28XxCQ2oqyqh11kvHnUfkDwIRW8xypO03FcK\nS9nnt8PS4VkfQVmehroU81plsqCMTeTLFPzWFABAQESkL+cPwXxSpM9gOPuc\nlH2jmtBh9lOvEnGdAV/KAVlK8+xMnwoVHVgSD/1pp/v+Vlq/IzZUlPIyLNxD\nX7GnhasYAXvccxoKCwqX8gNCz7Qb6tGuQ7rbbp3IO/rCWsF5/dyLb57Vzr0B\nDvmbUjn641IYsdXoQ47LZlobVrfBfK1TjB+wYZkQ9RsEfr0LgfZawDEqn+09\nPXINBhx2fue5N8j9ATMAi1NWAOP6H2SP2HkiKaLHX3O209ByjoAabv1L9jn+\n62oYUAxs1j3rua9V4chLlCRZZEKx3giwB8osowChpNJM928irnYVMH1k5uXc\nSwEtnvsJAMIaUAFy3uNm1doHwV+Za2XUnLzGpSkv/FVCTWeG1ks8hFbI5XTJ\nhMAJm/7r3bxpam9XM4VfOeYQUeo7LR/EhSLT0ghcwAs7ZQym352cj9M16+/Z\nIFfX4HtTUA5xpfgb+L6vKG9OW6LQ4tCs+bQac5L59Q7y79ZzecRDQhe8nxC1\nNytN\r\n=0yQZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCT1pPC07EtNOwgxRw8UaxUnfQxxgvvSEM4/MxpSfl5/wIgZnn4V1h8wzea3lxT4b+007+3IKVoc9dWYKzEhAUz5tw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.2772c509.0_1589222194072_0.425582741486634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/top-app-bar":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-up8EBjrqhfTrJmUwXy4rM7pyVyh+5zpbBPJNN7PL3rybdVIwnDrKBjXJNgeYYivrdgBr7rmOgcPy8MVIPFPGeQ==","shasum":"278cefce51502d7e7cba117f723ce675ea71c6dd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.fc4796d5.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/xCRA9TVsSAnZWagAAjJgP/28zsONoKi5EiGjjLOk0\nV9oJlnCrUMYsShqv9u8KPHIXgQ0LYp+lU4cjS7w9WcJisk9BqWdNj5+wW86G\nCXbkgaLsZd1nZJuKhkvzQQf559to1OsEqgFDKFNex1dRcuf1j/XbORdkSI8+\nt+SLQnKXepcsusJUOFfyTiuHDUP3B/dYRW+GVCFBXuwmcBjjiJW8NZYuXKFF\nLe9UFe/QSfN+K9ABx63eE5WjQTrqLpJhE7wZ6fXYaplMjIlrskZ5t6AiHh0M\nyz7p1XgidvKAbQRwFHADigPKrCWMF7FGCVPqtPCTX1dBgAoz8iuGSRuCvcM3\n8ws0aL9hcI8jDvPefVMaDPPt9is9K4wSaxwAevlFuSJwJ9zXFB6YxtfZ8yp2\nbzgOhLUGMvQacKnneGYoR9L7c+8JN0pSLSfyHuL0v1knjMNHvlU+NjnadwNh\nIIj+rPB1+3+R4BE3kUBVsiJ42QT1mCnoFEXwFQ+PTZEdASuCXZS+I618YMWf\nVDkHPlvE1xRs1I3S3QKVIbgw70DNhmekJROGzsvM+fzgv1RQXPS8TONSlfHR\niNffjI1ByxtvJ3/Nfs49rCsxqx/pIkgsEvdo0NXppoaYy5MeQV+EW9LsjC19\nAUEZIjKQau4CRrX9WQwjxucV6zsUBwKpYYjzttx1uOdLIyjV+3IYRlzR+ELa\nB8N4\r\n=GX7z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDY2uRDR8eIzYt0MSZQj+b1i3G0fnyf4sd6bNenrHhfrwIgefF0EgeXPHwbiZwTnF9CXXCOiJNamRllDm/OwoZe5LE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.fc4796d5.0_1589227504758_0.5214278408193991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/top-app-bar":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4a9HPeFV5QCUqujObuSaEeZ3nKnOR+LA3adwvVzs/tgoW9Kl3CGdHbiQiZ3//e6W3I85qULN2UYUYYRPO4EFNg==","shasum":"0815e31bff0c91593f064e239058e10e8b466253","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucFwCRA9TVsSAnZWagAADrgP/3s5Frp1idYFp1xF6GZf\nJ76HfpLzfiiGZ1qJ6+2/nCD1GfvK6Opkl+ca1uVTMIOjtrP0I7euqyOOG4i8\ntwFyBIYjhIjw3ArBl1ipN/zigbM5F943BmgSIYq3aPhDDD/2SgespVa7/QSr\nrSubzeKE/i3MKi0wODwFu+jPlf6hO9ShheltxtEhm8s9xx9hTyllN50KCsby\nT44J87qEIMV2jA8aHiUtOdkPo0StoSgqWrV+wXZbKrR7Lsfm5Ek0wPJP/1fD\nZ9w0cIJpvzeaD1yc1+iedo3KQi4G0YQsUKnF6MxSLLJB2QQacEQbRG+IMoTP\nbWjmRMqnEZ9jN6TiMk1P7WKDuMsvFgJlMMSHjvMCFfkM5c+Id7cB+4vl4ga4\nuhxZrOA7fXysvtLbzPymMg47gLPpLx3sgRwkZicvZqh1RsXqGSzKzn4kz7rE\nY/3JjeaAyJA1y7qJ9KwXj1DLwm/ypbwWT4b0SGTI0BZrFvA1r5IVXXewCm6r\nFKFNPdBca6ZBEONDSgwnhNtxzUog8IN3P1Wh9e5nYFp2sifLcOm4igmpUZOm\nJxF9KUJVvGsfn0NRclaRSTaENIM3Dv1OB+X96Lm7c/SoFGqrjYgLkaUSsAm7\nSpmu6ZAELzq97bdSqEvsSjZEL8Erm/UOFgacoakFBrc1tLUm4qN5y65ubtmu\nnJg4\r\n=ADyc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIByLIn4ez2zakeOY+uaYC2rUsEgNpZtPqVhyUMirlp9BAiAgdE6w7tmHiFqSx20pkQ7tl4ZWxIXpAuYL8QXWbyPlUg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.0d1c5f2c.0_1589231984457_0.20938323114309942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/top-app-bar":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MySf/oK3vodr+Anqor99dLgJvp839Ur1OY9uOkwaaAsMBF1YqR7vFdacsrF4t95XM5wPdsJKWcrMfqdT6+wSRg==","shasum":"f1b4678f26048a71347aa79701394428fc3ac826","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.d083d93a.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetECRA9TVsSAnZWagAAW+oQAJGi7AegGiSykdGRQpde\nJcub3wi3UtcLxlGJPwNjFrje+wdNh3ZCfQGI1G5VuWwh7+4GBHUTL4Sxa9ca\nY0BZlD0t2zhSvLpmd8YAbDZl6nyvW+4G75v5+lelXvJbvLB7soIhbzWdblIG\nAcBGkd6lggK507e2j8Nf558L5yKSAmTP5WCLGldbjQnSKto+Yyp5sT2dq3L+\n3qVRJrGxsx+yIZWPQmlisHyAXQvT/G9IZ28gqRLv61eCi0SZEDYANu7gMevP\nyqquFWJrQpDTVQtCdAk+apiI7a/2MMJ52siK94yGRYxu7/FkGLIHyYj7OU6t\n/rfUtg5YBFE//eGx99fyLeKP9ICbYSoOwH1MM8Uhm1F7DaaQodEjTe5XdjmJ\nH/vwaE9lOHGOGt8ongoQ6Agpk7o3AiJ/fC1d55Uk3OW+2l5zyWN/5Dx7GqTp\nZ5ZnNKwSG7+kTv/gucN3UEKpukeRS1l3B0Hu8k0Xo2weqzfBqViSpEnMd1mj\nJoQg6/4abfyYL+GYQWfbTQZM9h+u2XX4UuAyEZxfOJwxyFltPcObbU5mp8kR\n2gG61jiiW/meDox3RbQmimHkx9Rbw29LetHd2XdNQMt0XwSXiUH5dKb0UNN8\nPyLqxa+OkOrNvry3epaSvz1uoL/uDa7MzwBTxjlVMgFo5HK9n8FNWHNrREfJ\nNd86\r\n=jtI9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDssw0vIN3NMCU1o4GeWvQ8n9kfMLfqInZ+U0nrzPiIAIhAJt9UQjcRl5SdcmvlT6HAYS+LSosfqz4eIWzh99F8z6E"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.d083d93a.0_1589242692284_0.8634232063544629"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/top-app-bar":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-adkgys4p6T+6Ax5TduCLwhOwYpXWBXCBFk4HBjVkSnL7YmwAPGFRFeKKXksDUH95aztaVmCtoAYPSU6d0XGB9w==","shasum":"2e1d1ba0b164a96dc3796ed28e871d2872971fc5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.c95d429c.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxb1CRA9TVsSAnZWagAAn6AP/0Oqf9O0iz8LtZuJ1cs0\nQEVXT+IbhCLoRREeLIq1wWnsF70ObK6Abxi1SKfbyMgoHvBp3/STKsHi8g7x\nb56GRso5Ni4iNhM4GDeo4kDkW66tN/wJ2Xl2cNMrvz5DRrlH8Wa9SRizj7zI\nCXhFfQXBvomw8ziKl/AGdfUDGSB4XWeANfZnnzkIWOTkUixGy733AtkpgcZB\n63EhdjapaJ3uDSvxkUubT4v0ewgUMYHv7iwx8DLE0DeRd1zMkk6f5KwcNx7n\nd+5YnyDi9r/qh/kADqxrXWRI7Ig6Jm9cnrSzj79hFwO1J4V4tJlXXxXvzsjE\nR7CiEhjIvCeshmSIl6ANuNJoTcL75FM8hzptE+Q6cPG4kk+SRKNqnUcY6vZU\nu9G8CokGyJ/LbijAJEXEFjE8IqFHElYZQUR7IpXjmfMCKfEasLmWngTO302w\ngd/zXXo8oZul1st5K4gVW+yPIa1eN8OwW70wj47dv1egwx38NIgceRy6c13M\nrh/t0Z9z4ulf+FroN2cPwAOdodfImx9uDRc5D8DUc/bMR1bkDRMbJThHlHsL\nOf2OMdffcLXMk7ZvBIZdEOfHK+NgsOYYDfjJv5LeAPLSxKv1G4nWfswbaP3t\n2V1kCsGy54xq3jGmmfSvr+HtBwdDVMd7WtAuiWHqC0XV13tLEtkoIyL48YOG\niOi1\r\n=xyfD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSc8/R36FFJrXi6RCIVdvFnELLxJzB9eMVEOFN2T5rtAiEAx3b/W+y5kH920NMFTTpbuK8/Ile2dXlryf4sjR/KAUw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.c95d429c.0_1589319412751_0.6057072618114248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/top-app-bar":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VHZtTp+rLZW9M2vUUf56NwBtu3ZJCSwcYwGrUJR+BYuHdiN0VCkVy4n30kwnaNgvGchpzGoywhLTTAr46oT8rQ==","shasum":"c5a10fd0e12067564a04f4abd359126e7b0aaf82","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.0c1ad726.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CCCRA9TVsSAnZWagAAyy4P/jEdGhOOxWdKgcXUBEp3\nQh89wTffX6IbEmIY9irILaQO4ItOunl4irrDIWNqq3JmfgHICi82nGj6bjgk\nHnvk1NZ07hCTrM+iP+M3AH67hhkZUiR/ias75yda0G0ESqCEf/AFlCS4minK\ndhNmi3g/zmzs23ODmkY70p5cYG2jjaSbOKrPR8mDLMNwoisNwK2mDZCNSPGe\ndRVdJESp/xQm03Gt8m4x2E+hMfGYJMhk4yFEZd9xsVdM8zkn9i+aJ9ptD3g5\nvlHnxr36NKkrXxyMmyQCmDYMQZ7a3bwEVLwL0FyJMzG3/69+kxk5rdCFF4jt\nGOdltwG4uo5s235cWgZ2bD2we/NM9HSCUEueECd165cdbcfdGWTf2QpRnupk\nL7KbGg8UDVJnT2lWBIo9SQa2zpQuqYrpJWV1NOA9UU1HPk0FHCTMTVG5oM8C\nwTf7Co6xt0Nlw+qEQXEfEEIB0gmHS6WWn56cd3U1xif/0eYXS++X7HKnzlxP\nLvsyNiBb7OngfyoZ9XIVBE9r5DELbm62uzdQjehFXYmWMPhqg/HBpyVYf6rc\ndN5h5kItTyi7UNTCYeVy7XVzNUpQpWHLoWsMGWYYL2KzF8/YrKSKXB1hpvcu\nduCM1qyTRhakQjA2QeiwPZc70xCO2KltCeRT4Jw3hulDChLOOsxrTD8qccQM\n/weH\r\n=aGKm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJhe6y0Z1iuuiUMGadvT1pNL3GqDpM60T0wXB/XADyDgIgem9c548H5dPzkn7+aQpZ04adkiNXev2I+hBlLoHE4Pw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.0c1ad726.0_1589330050525_0.4993809031498557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/top-app-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-f0IY3VHLMZ7oyEHKSdbofUSiwb4vUaARsanUOT7tc9CWMXV33tXKu/lMwnaTmNkzgYsgi3QhYgf2l/4maYQSyw==","shasum":"b26e9a6eac981f3d139f1a5b065168b488b16c88","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.8b6a4700.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwXCRA9TVsSAnZWagAAG9MP/jGdM4ALcBWykxCSGlK7\ndhItQxxP7RQslDBzipYrs4deKFgGj7K405yowBGuSz3vbe8ZV+Dw3ITEJu6o\na/mZyEd+U6qSWiRy1TNSVialPeSQAwqPjPJltdAxSVMNJqE6BaCA1VKVXLOv\nDRudnCLuva5hYNl9cI5XTBQGw6VhparsK8NBismF7gw0XgQzZva7iMlCPbqe\nPM9qm0uLwrFvBm8E4knCZP2bed35a/pR2pRzhiqlrzUIoo1JnooXRxLSDmUi\nuHYkTzZo3VVR1yCXGejS+LC1UyOdQwX3yZWNgzON7bWXzsFByO4wKPHHXUfO\nQaWPrkyPHA9tNLKohhOcIHONP7zjgvjPItA5dDrya2jEu9C5R53Q8jvfCzqJ\njYoV9E5xLeI7OjI8O9diVz8EgzAphzDmI5M+924+jj/Ex02Km7yXEC2rh7Zq\nhSN9WKqCVsi6+7C7RgSGv6csyCUdVGqWbTS0722zJi2/nKMRuHIx+bpWLPs6\n8z5sapSCvMP3WB59h5PJPkQMDQ1xRZicb5VTDhVjiMelYtXJR7/Ziqwz/+fE\nJt5a/WUjsKrEX7u34fu0O+fY+e554UJoCYa1QhcADYNy6IWjp2F3t8VPijv5\nK+jnCdsg02WLC6DzfLk5uhRc4+zHxd+GcWp0LTXCubDzE8HJcIyjTy0e8xia\nfoXT\r\n=Kmw9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjLuRB4KhpaHZP4A1f+lGefBtVMQsxgSJ8mneY+cCr/AiBkqHUEkB2SX5ej+5PIns2qVdyrYvLrmRGOXVmwSkyZQw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.8b6a4700.0_1589390358594_0.6575935800059642"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3270effb.0","@material/top-app-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tLXzPpaXSzz+hsA1smWbBqTNw+yTjq1pvYmFfEJxMddeoxafLBU9ioafH0tx+L6glslWeNxW5kQt46OeiBTjng==","shasum":"33d695d2303c193244a87654bcd702528363b88f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.3270effb.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWSCRA9TVsSAnZWagAAhNAP/0pI0Sx+Sy0zddj53QzY\nf/JPNSQykUJKJ27ekODxGxQ7HPiup2qksSrNs1iDFT6qNdMy+4fJjPZW5tG0\nXUU0FlTvuUak6JDlzVcjTBnQRs3pZJpTHXk2ORY1vkvJVuaD4xu4ho6T0FNb\noZ8Xw6jXEKzC+7tOv+IeCJddMPxrmjcbWv5ytl8dN+gnpDi8yHT2YkTnq8iG\nVtC9quLP0p3fzT6eIVJW+MVagKUD56Bq1Ddek0c2YS5BtAVMslYvd66bW2zW\nc2eNjSMEfuwp7XSH08F3aAvx1QdcFtMBYiTzG+qEb2t5pzU6G0jcI1TPxeyR\nL+p7hMFNDUDLsIKGghgcO0MbWcHo42OxJnoLqb2upW+dfPAhGmZkTzZhc2ZJ\niLEzQiyJGDA9uIF9dMvQk8oDHQrH3Tw01dkEMRCo9/cHwFFBknI2ZVIu0Xqi\nD+7vHKS2wBLmVUC0Y6I88wL4//txNiPeKKO18h3oszGojsngTuFC3YrBG5lW\np2/fQYbPp3nbkm7IXUijFNRQL82BGDbWMBHGYl7sx0tMJ3DpX5AjI6tUCjRW\nOZxdArYcY7MI0ScMojWOLQe9PYfegtl4RLDYhlCn17khHO9LqRtx8a3SImR9\n9v540IVedPVDiqBER6eoSm7ozb91Bam3RPoQ38Vj5Vl1GiNz2SHNmba5Wf+G\nXxji\r\n=pVGw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVhJklOkljKnMMw7NBGEeLBADRXHft80nAiVLmQIRp4AiAVmFwRHYCKFERMMCZPKLkYOCaIKA3BdqQ9ASFfDpjJGA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.3270effb.0_1589405074138_0.5917510416232594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/top-app-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4+dtysgRzHF/Vz20pN535DWSJ5H+I9cYXQyBBgGeizl5TnL7KZoWUvcPTUMjllFzQdS0/miNEF+bsA58CjXSdQ==","shasum":"ef080be7f5958178d695bcc36d080bce00ab081a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.832e64f7.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJY3CRA9TVsSAnZWagAACt8P/2QbX3mg3DWd1ZgHz0kF\npuqIfVC7y0I+gUpZebyxFwbRBxPYdK1AwYyfe7r65Rpa9zYKZh0RhYcMV1VU\nV0Wk5scwj0ltmljNKxAMtkia5oAjoqLAAWLAuFg8xjWumciUmzug0KjbHglC\ntv4K2UEitWrZ7v7QG+9TXIGTpQFY0WvBD9ACJDBXyGorCtOsuHEQ7fDV50L4\n36XJadchfvxi67CMHxrkz1gcLnBgVxBhrEGYalP7lt7o5JgEcQBC9xM+itpd\nx3wFpUFT7q4k/BoX4hbC6sEJuU2C8RSdXFFvpqC8kyYdTqUVQcU2rPZ0jAZc\nquHO3uKy59yX6ewyV6e3Uc5s1jblYYb1eC/J0DtWMGOAf1C3dj9lFfurRbQu\nbeR5z7AjleQkImlw0A9k0vv81/j5sdn3hUKg2W+iVasQOgh6eUK8peJ+XZNs\n6xJkh26+2/Rkqp6ghQICoP+MyPRyH7OCz7hCpYC4Rh4Sd6amFKBiUGF/E47q\nlACjFHqRGM00bUWRQxaVdOdD6uEHvg5WjKqKuY2DsfEH80DJgzlgbIn2Tx6U\n9+MXJs0rOBMVx7QdUOTee/zIBIklvUc1lZB2cAZz2maQh6Qhmuqkqch7Q1rz\nSV+G5Z6fqoUFWOPmpFJcPrqE9lzCIWGcoWAKOztruM5NVSUjW7lKUIN8XbBr\nJfyD\r\n=Fxmm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoBmU0phKdT7eXZtxhKP87/0GIaaa6Q5KaPDiScNXt6gIgYH6ErzgK+o7vDPxMild9qrFp66fyBh5wtvFOLRPZToA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.832e64f7.0_1589417527393_0.016966621096393686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/top-app-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fPX/6Rbty5BAEWuoPe2Q0dQS7TBC5WvsHBSB86eONxQPc8bM9R2IRU7ev+zL3oZvOVb7QHgHzZ4FytunnM6uew==","shasum":"0a76b975e1ed1cacf19f6b5def3b02dde1a374f2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.472fc4fc.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLyyCRA9TVsSAnZWagAAXUQP/jO+WkNmZpvH69ZfsLsr\npArNY7lc+wDtRt0sTadmue19O/hBI+Zcuipb++cXJD2M/a1vF4QdB+xrptra\niR2YFqta3Pac+6dDTGVxVhof6VXqgAAdcd+54oEDMkA4350yOIEw4SkxY/BC\n1QUXN6R1jWU+6sOqai49WXf+lWZvOULpJCwapuYKaABINcNRop8rWhIEqe/j\nkFmPbM2kDjCzevCzvSccmgfR+GUFk09YAkBtsgRt6NfQF8wUKxDDpphWTYGZ\n8r5/Nr9FhSijpyXjnVsQEHIGo0VGTVZ+q1UNy7wnWLARbuJzLrEce0G8NjKi\nhh+oupXYdN6RbTO4qFkZC53xC5+Xwbkf5lQM1ER/NNfcHVn0uehjHqKk9zX0\nlVCJm/lcTuGdH28slqDP5eF6nJd1MhpNw3j2AEWEO/jFf8xcMMZH8+bfOOHy\nAyfvEJu6P+104ldgIrVEZAf+vCw8lJq5nER4kj0X7dgRK/lKUpyPBHHQOgMZ\nFNP/0ZYEcGpma+zpNzG9TQltCaTaft6sgxUnTrTPGCoFLVLdPTbHFpUsRl/d\n48Rngx63BZwHlrctoZHiehPcZ4/1eTBqzZHq0+0mCr9ciV0GgLiSfbsLXfXe\naI/SZjq82JGtEYCXzoGsBruLxMCg3s4yvPSDeHtyAvV/tMX/OLwiOipt1e3M\njZTp\r\n=vhkQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHapODOoS/DmhAR0qGHwp6VTXtxs2EGnumR38TMDbtB8AiBGAbiU+JV3LUgGfxkGuDV0yUZp9DtPWQA2Kt9wKI1/VQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.472fc4fc.0_1589427378043_0.8082127392450555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/top-app-bar":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vkVlhcwd6F1HmK/2ZBHmmtsfKrP9O7d/ELwJ/v/SRP/Sh2PX8jt0mMcjXk5SS+OCKKZLAHwfr/MxCipncSoAZQ==","shasum":"cffcf2876786347f8c01413a37864a3080194f10","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXDKCRA9TVsSAnZWagAAp9UP+gLLc+WUL1WUbikr6P8C\nKk1mnSfjlez5MCp6k39GE190kLwez1T68H/uARbwNF+/OIcgv/H63T2M0KPP\nCrloI+xS6jYuNKdfCp1wUdxRZuxfQE6nyw0HLtBVc3h4+Zl8khr868X530vH\nFwqOJNlwrc9Sgkw1V37Ja5UKcU8TfvkmB31hLXMjWVG411ORRPnZvLPNMMw/\nfm+QK4P9bKMl2SQXsEklhVNKa7HYUbprT4KSxeHQD0pJLazUCrMkVPSJlMAY\nUl+fpJh33JXc2NXJo7Kt9NyHOBJ9E6s/Nl9Yk7n3wpi5Gr/2Ch7trqp3Da/n\nVYUqwv7AznLLCoBeoHB4V9yXG1wIz4J/a3fbHgO2EBhsDWIvcxkIlCd+gI+E\n6qWzFFUz6a2EKu6mCZSbEqWHGfJLkQonQXBPUmg393qQWERBznJaau+P+Gy4\nYE93TO+JDaIzGz70/wAt+C5u2YqFLt00KbmIqUTYoFKfMNxfrs2MEICnSRgx\niaHeDXhB+XuxeRsuP92zhQt7etJhsyws+UePDg4P4bUSKNgExuxSkQH6funX\niY1wgttlDEwpMmx7GYYfB5WGqH+YhHzufRhRuljTPj6IR+54lxXoJZ2b1/3F\npQ+O94jXlKKyQ0cucqTYk95xp+3n5CjsWwgEuuwAsvV8+75BSApHSxgcB7Oi\nrZtE\r\n=VUls\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCekUvBscvXP9YK63DByMr7WZR0Dbdk7+Cb/Y/sWVuI7wIgZ7W0TH+JImEbHZqseQ29fpVfcg2eZpsuR3+SrQTrNfs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.4dcd7dd5.0_1589473481923_0.1410859632563355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/top-app-bar":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-90xRJ3EL+xCYlR/haKJWjYQvydTmfNIxCqEZLmC1sd57VNLjn5WU8VlCErKVIotP/aVx2hL9/IVgX7HnyjkkRQ==","shasum":"0bcb4ec800ce9abda9471ef175ca2bbf965e88bc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.bcd3400d.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyJCRA9TVsSAnZWagAAnXQP/2Zfa5oVqlc1xQQqCYJr\nZK748t/A+qKldTpfyjB1uRIAhGIXIHjXCDY+1giJC2PBwmUItaShNazPU93P\nv6LDb7Hhlr043i54+Kul45DuqTtF2nXQoJHe5mNLPWdD+39x48GaauXhy8Mm\nVE5kfc7vaD0WGjtUv3MNqtwyv82O/4QWbSxfG1maltL6sAzKjA5YSFiumNjg\nkY0gISH/T7JYY+IWpz1k2xAbw2erN2wyCQhdZMMFMpyJYEnSyMx8PYLpVu0V\nRnqPMtCSH/ZoRe4xNDXudU/7wZ5BNWCE3ISAUhW+MH+wcDR4a7lTBi+OA/ro\n3a3jD7N/1+n6DCiAaP8sZZrEPxaStZ99wHXq4/JvG6jsS7dvRkqxxkMH+Q5g\nn7Dp7bESIrDDPxNcWgIswzJn7sWUh5GeCh+EPYaqpcy+E+Z4J3vsDs6kg/pR\nN7eLaejTV+5DaipoJFOk6qGPLhxO5MCPAPDtAblt5KYSTw0GjLWkIViCN7cH\n8NHd3D3QISGWgDwRkMwZUcCndJdsxWaUrYOxcRXn6nQQDPX99uEZUD61DnFa\nGvW9qFxFeR3MlJb4/Ij9a8zbMD8qiDJgjwnn0h19RKHdVyjgYYc4njChfAUs\nihObMoMCX43IIbsLykc51XhDHX4jHwSEy8TzN+hSuDckqlqYB1Fcr04BXqXn\nfHSf\r\n=e4Mj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOJoXGwKmn5Cp43HNxt9q85bM9wkTNtWiaPEAMhaGhOgIgEuuTdEy0iXndarMWnPF2bWU5NuxO8YeG/cHPQK7l8zI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.bcd3400d.0_1589582984706_0.7758464573658501"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.91f63179.0","@material/top-app-bar":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Byc7B8v6kQFq8Z2cNcxbnrFC+37kpGhdT6IfPYko9H9vyOa6tElAwm+K7TQgy4+LYGf034FWCTbfWoOlZAaFuQ==","shasum":"4eca294b5278d4ca967e36519c82f9baa829e4c3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.91f63179.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUVCRA9TVsSAnZWagAAnsQQAIxayQ1aiqgFtK2TTPF5\nH7+P8gUsqVC1IkwyAtVgEJHBAYbY5Z1Kp5SPtxSeK5qz3IZfftXF47/+1XYK\nijcae7lcpbWsU4c8wv8P71IW33z0NIsTbDswOJj6lvB5dXLY0Vgn+ZrlWlag\ntrg1B3zCmUH/50l0XUWh8u1E/fec6qS3hZJB5NpXVIm72nLxOKZA3CCR0m9P\n5GSe5Sx3g3kytX4UP48yE5VOblGJxOABxfUoqF3g9a1w/Wvugtmf2DmcOIxK\nFFvFISf/CupudM8aTpoo0RfHQXYrD1V/Glmv02Xkpl3ko0yPwNY54+3+bZuF\nW7LML80JncFIRJABs9iBjJ80gH8+YQv9KOQE72kn3xavY+cWzb7EPoiE85SO\nbW2pE2zQDxQn4ixoclEg5q36dGqx8TODriM7vKv0BuHpcWsaCMJG35I4l4gj\nKzTUzLr79B8JRXNSCHblVLu/Z25TnbTWt/CHw9wAOTHNBaP1/fpw3aCtF16G\niisLJOzf8XQh+dF22rFFMdp+JhqElCCl/0JcpmW763r78iBrqVb2YdOZbn1w\nbNmz8WcTyrn8dnltIWjTBmYTL5IVCLyT1WPRSJqcxEvXkTg3A/NHUmqPMxgv\nmAVKzB0Pkj/Klt91Ma85ke46BNgww57XKo7SpAk8MzHtyRaBcA6O+UXRIhjw\nwbvc\r\n=DzfC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSypflzdQiSSPanVhLrgTmy7UHItjp36v/LRfxjEM8bAiBPgtZqokplaAQCFLqFnTMEr8NNmb8nC+j/VhokvgRf+w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.91f63179.0_1589589268758_0.35991143341470244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/top-app-bar":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0H2gjv6rIPpwl89MLfKF4bXdYResj2jIRQMv/Zw1wpk/OixL3HBRA3fEeqY9lJ8FDqkfn4y56aO/ULP5hSe5Xg==","shasum":"e549a85642df0bf757091915f682c92f91e54447","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.b8aafb56.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSGCRA9TVsSAnZWagAAbzIP/2zJ0zZQHeuC0akjjIOC\nN1SKiunxw3meEMN/J/rE6TpemAEbNhR8Bxmld8N8e1InJzZw7QeuOmh6Ugfc\n3z+UG1WTgQpeOPC5tU7y561ZMWAPdj0qWNhEydr82/I0sQpYzKjL2HjUofBL\nOmN2vweH10z+Wb/8nTOtAttooNA7/78R6Vq0B/Y2RmvTjtbYDAM3xD1u55Ve\nVkxEjwLj62jCr/VfPAFT8KvXc9DmScap+JVIXSmRkvhjmroeQKZQEyGVSgbA\ncoWzCS17oZpsOSsDAl4T+RtNoTb3Supt3y6FRdRZsRKVOksta8FRi2d6WQTi\nWWLf72OImGvrFvVvtF+/GWCYcFhiD33oZ/H/XkDgmCku79s/giOKAtBaLfe4\nIkvYZZpJLvWum7dbXaIDJInMePBTdDx5aU7aowGl4wsUSl/Qev4JdYB61fgM\nJak1R8f0i0rsNhyPBgvoAf8G5IId7efu5dtO8/yBScyRrPtdBtrb3wkKesnf\nhw9bzFhYp8xVgyGdtA0WBIawWGKkLNY0KfOqs+QodU1wV9QzsqK5JmqLpVNg\n2Y5XMW/s4BXFGvRDN6chfuD6BjUQkjIl20SFLu70TTFN/0oM+cBrVsfU4c4l\nPaENH28m0UpX3mAbsxQ2d7UmSIFcJVEJWWZjSlm00wbHVGEpOwDv7JZWZPJl\niZhZ\r\n=ATzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCN2Rx1DtqjthhoGcD97SiM7Kg5lbBapTp/6Dze+bmNAiAOJY1STEmVzxWzcau/9aTfapXPdr2O4vPa4FXtqJi6oQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.b8aafb56.0_1589826693898_0.5825487146987531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a564b194.0","@material/top-app-bar":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ADiQWekNr+pui6v9J1ifbuYcJCG7SO0MyJiGIWF+cCYMm6W1MyB9B2FFsdtqPQtIi4ETOlZ5pJT7qvSBvhYmAQ==","shasum":"f8a248a9fcc748dfc4807c104a178299f7f90271","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.a564b194.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxQ+CRA9TVsSAnZWagAAnNUP/Rdvo49KVFfBMvdrYmqL\nhyIqk5RWBpobW5XyCw0bAkTRsWZrbMO2dyNs+BryQ9gHA/Qwfok7pTomYtNQ\nX67B9XrtMQdmeMRAv57KQRyS7zF4YXdxllDIR3WU48pjDX9ui9PoNUhUX4fa\nR5Zs2pFu6XnF8Z7hvMWNkacbyYPBVAPs+yzw0suUcFdWpLzSL/R0XqM1GC6U\nXcokuiJaPoDnnc7Dk2YMxMIsHKEPy56c4DGA9l3qrC3slgUHiXmIcJGQsH9c\nvzvuPAoEf5yAgw87qWjGqZt0lqjw0Rx0jAvm2kUiSZCY7CF/25lfPpIeCgCp\nLFRREX9pZZn+IyNPkCA8071IiSnymIDzWKEMmjWHv8EYHjtjcgHuyNQNX4wN\nS1FPjWyjPB5T0YiY8sGBFt+cz+1+r1BJfqxpKl/1PuYapCh+hxQZgkJuzuQ6\n9VAbu6+PBVOVKifys/eJR1c6xba2PoNuEp5GBSani3raWRC/Xz9c9DB3oDBh\nEiXi13gPVMBaurqRitNfB1db1eLaeNTMrR/BkLRJ+QCigFQaQNgDlzDN4aO2\nFn0GDAfKsZrc3AsFdS4kp4sDFcfmmd+tLvylH0aWHnsPMay99x3CPLTisGOc\neOrtXOkj7FHOla1oQuRkKsu/jj0KX/AuLFOaxG6o8y1i/VxbhmVhtUA+vN42\nLfOf\r\n=+/Lw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm7O4Jg+ovkC4rqtlCDwUukQizeMB0+7A4IWqsv654YQIhAOXiZ4fy0n6SOR7qya8TpY8dXrpVSMcAuQfu2NevWe/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-top-app-bar_0.16.0-canary.a564b194.0_1589843006138_0.5221693047500593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/top-app-bar":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p7vr7IIJ59WBSzXU1LBaXcOUYUL+4SeXnyYWhi2eTbkrbzTFnj2sThq8RN0biElP8aTBNoJH2HxKB7PPL/aoqw==","shasum":"a2aa0e3ea6617a0b7935c704c11562f78bf26405","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.ef56465b.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bjCRA9TVsSAnZWagAASscQAKCu18jWnK8YXc1lAEcc\nBZKJ2yP2dXsgq2FC6UCppj95hFLbos86yQLbLyu+go8up+Bls7mmcjabMLDo\n+Z+nAIJWY5asO0a3X3rqqac44JrwavbPoC6RjowOf3VKidsAlu5txW6vgoLN\npmHT8myqmc3vseoKuSA/pBAjfnfAZUgCDQTL9PY8JNg4xKF+qrHKXku1uygp\nA4D+7+uR9yAvGUt9nMgzvUrtBCyA49T6SNAuPDlgaMOugNrnMXJK9vQu2IR4\nRaLrL0pbKq+KD3fA4WBNkL2Z0+0YFKHq428nEOb6erNBWYwmSITnjjECZrdB\nF+vjVh4Qnc/iJG4WqFpJ54Bl3b000HsdhOYt8zcfPE4OWlIIc7VJkAeJHOb6\nZgaS1naJI9oz3uWndIE/976QJjpFso5LNjeDTRSIqPHBVIh1kbsEfMNj8cHY\nQBeCVDy64q5ibf5dCCQOyGFjipf5chflUW1cc+KIqpns2lgoWcYVYVmMbjHe\nivxScomWRou3jvaoC7we0zdBaFQvQQc2CQj1NCt75ymc2qlysTIYRr+MUTkF\n17vxAoV/6Q+YZwtPnjbXHOkndrDq62aoUqaw5QDgPrgXdJv4CTMUMtptGaPs\nFdHN7T6xRaNEgC3guIp3UK5X2hmNUZMmVYVC1JrKkf4cCimL/Bw92DtTC8F9\n0jjl\r\n=1IOx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeDdfq0WpXNVMAjzWBjtDBkgfFdT7VKSEzQEzoAtHwYAiBFxGIz+/T8/+7Ge8bx9wVRIb/ozhXEw6AZR5QOBOJtGg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.ef56465b.0_1589860067182_0.6782175746698098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/top-app-bar":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q0Fjc0XLtxjDHDE+1xF+5cKPXYpWAI2bImdURk5MLyvOCaOU+RO8PAmHCsP08XnBi2GN2T/oORecyL2aIKa3zQ==","shasum":"cd7c6a3b397be2912378bc52eed79055900fa207","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.c22dcd71.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBY7CRA9TVsSAnZWagAAfdQP+wV+0Duj9woTLl48L258\nxHWJQ75id90xx6GPnI/HHR1OxFD5rkdVrlIrY0h/dXdXCpizAYSbymMU9lUm\nMtc2l4up4tolHUT8yMX4iVoPTY/NzaEd7gId/OEOJZadKoDHBLcADk7wYvJF\n8vmcUQv9DqZ1mufRGXv9ElFjnjP4brUVfy2O2rw/hx5jb55rY4iSwe7w17WY\nT5Ngm72Qh3CA6R0HEk4JfRWP58pbl1C3iv7dXtC0WRxuzCBAfJMpL2nPA3oZ\nXBW+G88bj4jXZFDNd+rU1TfeOKif7U/mHfsW0d4ANPyauO/tCtADOXGx0sEY\nZx1JsoLwHuud+vLlFYcWXR//sinu8dtFN3ImVOdj5C1EL8rm48YIP8Hpocjs\nR3iiMR8/azrOHBEqdQ+SJYlf8Y6vF6TZD7WUTnxYVNg2nwJ/6dCjY2IhIR1s\nH559vVzLsK82vYuxe5LdC8lAgE8DrHIK1+04M+jpCTwcGiHwGV5/cF1Ddaqv\ntzOks2HNdkQsnh6Nou+w88bfp+XYe7yM7h6fBpWLqbm4v/gKObKK7qCbgyNP\n3TOlEacsav47ZAviC2fMWEhNLMazrqhk+xmEfMGx7VmyfQz5XhfAH44x9cvP\nOYzzvWUmwRq9k3njdtrlNU3ibQP5dzfU3nL6h2kH6pu3U/QvWJVBEsAcvrds\nz0KP\r\n=dN16\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7EO67xy9oZwU+nykkDfF2a/GM/P4UZ0XYEttZxaDfAQIhAOD87ABzp3EGBws9+Sek4dLsYb3t7EZqTMyjGcUr5CqZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.c22dcd71.0_1589909050720_0.6510524259132657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/top-app-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RqjhKA+5VfTlvOSS0aiBJrA1bTa93zBDIgcazOEIIXwPmAVHikNXPo9msIaxGlI8lDsAXtsU7M++IXmIl+DjoQ==","shasum":"940e850babf5fea6d2c472469cf25c07743d2803","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.6eb62388.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEO6CRA9TVsSAnZWagAAknkP/R/BucTx6OWAmdmzb2Cb\n/GGsNL1pv9XOCNkV2zc82Hm4ZlkBziatpNtmbaaliyhJ+j4rm5hkyMJ9wteW\n9Z+PeDkXgQstAgWiSnkMYkeQUpaQO5ea46qQOsNUXofBhUL7gS/FnE2knzF8\nESnxybWUogVUVasxeOzbZ3bi5ifoAw91TiJoLl0Y865Is6EQrb8YZM8+6C1o\nL53rpBT4vEeaD+Cq3dlGrL6G00Fkkp31YHSVDcddM2lxR3XfAYv4STXU+u6w\nY6l9fvXJjggdANXyRs9IFMWFZhMrOC2PZ/ewNK11B/kpNaIXKHUJJiQ5lO+t\n/M9MpUAuEkrkRW7ptVXtDT4i/RDrlXzU9GCiIIBTfRW1TcDgPYsVWVxpc19r\n55V69Q0NNmJAmq3vPlxtZIldOzOrszO+bBzxHt0XtJeFwD2acw/r7ub2OOXQ\nit26sqx+fXt7uDPXwlhSf+cgHMz6lCkR4ML/3KlItK0hhS0amFrvAiZ5q++R\nEjv7F+gARnbhY1EEElMpBumA0hzIarFeYT5oYprC2kUtJxw3qtCw8I67BJWC\nBbKpEBtbFU7rEbaa4+QVF+NZgaGS+bspNqyzfkaUe44gxxTPxkjm1cSLBnk2\n5GXRJTiGcTw5jAaaIrbWd0URIlT2TVhAK0NxR0J5YKsuhk+mWj0zz1MZFdM2\nkOV1\r\n=URy4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHoqygfmTCyeA41a7DZJZsrW8p4VHHvz5EkcoXEMpczJAiBH+ewq6+2ny1+0bM25ElO+Nse+Jta/+ySuhkOODbMVPw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.6eb62388.0_1589920697946_0.2907930848066027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/top-app-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gsX1fj2JkDkj+Wlcc9k2nxWMFfKzgDRP8QVBXWHbghYsI3zTQ+IKdJXIqaECyeT+yBvpG0U4BInDKDeYe3Poaw==","shasum":"d93047ae6c47047b80adc26724f66027732e4f08","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.9bc3230c.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFHWCRA9TVsSAnZWagAA5QoP/jGX0MB53n5MexY2dtmk\nCBr13wRHCALur6rZOXz6434Cg5MyB5QtGUOTouZJ1Alp202aLaR41A1VQbMI\nb2V+Df9QUR+HfAONtptli/FtcvYA7trguEdd2towyvaAFxRHu7u7jbgQKXd8\nWaPFmz6if3SftGRGUCGA73wrwnKi2+QZTHy6IlYncShSNokTmhUtOTSe+Glj\nQninrsLCha22cgBK/ctX4SJsKzFqbY6YWOr6zrYwJyPDT4Q1Q/e5lD8hQZ5f\nLr9BGu8N+H2DZB2BY4wx+Ka1pglTc4t0mDO6tOSBa8ielkCwiZDq4uVRpbaA\nevFALzMrpAfRJRPmHb0wx6pC2Nr/LO5FTmpMC88e3U1IaSnBCT2jZ6uKoOc6\nIW4sGJyxaO2R+95G2EeNrP3zio5bizkN9T9hlZsu/fQFgiJXIjP+/IYutb3C\nSi3dFFdkt+8VC5ZxJT3LNENI6d80151x9gqMGUhPY+uzTsA0KwtJUp3b+PB/\nBbYGTAnC2RgDfVyIELBv7N5Up5Am8Y1TYQST1tsEPeGGI4xNFuTyca/zsLEE\nM1S+yDpZy+eqveGhvQGMx99/jgNT6L9spSjVSFJ29OIihzaySnDmwyXfYVLX\niD4CrdaVaVQ2PiMn/RB8uKiscSnShcWZ9LN9eEN6U258c+SSJpsE5Ycb4FFQ\nO6jI\r\n=0l9B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1IL3fZhZDHbYY7MUiR4k1DlXmeJxTf+XA4v1NLRsXewIhAMEV4LmrEK2QisV2n2uz5uGWNN2I3j5ZGE9yio7zljlH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.9bc3230c.0_1589924310161_0.16426585143117656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.421a6856.0","@material/top-app-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0L9egJ+8QivDbstiYjD1KUucu3ZprMXk4CL4zRgOUiL7XLEvlqjMvF0MDqqBPwZ4ceFSiAeLN8Z7uBD3C0NQyw==","shasum":"62c78d1eda121d342218db2c09aae348893f6da2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.421a6856.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL75CRA9TVsSAnZWagAAjq0P/jVSTj2nmO1wDW7ZuLZb\nBWUXpk+EHsYPrKMO7PZg3t74Dz7UveZnt4l7IoNZm3OWl5GLaDNsxBdjWn7G\n292KPDufn4dF8XXJdyKsQI2dJU8aBBGNE/LMxbg+NjEuQv9O7YFVOqB2pT2S\nSThGfzRzDAD6uEPCC8Vr8zQbarPSLxhJgKNl8Y5vbgYs7bdbcSoSLk5JZkwS\nB2y58AfaGH/QRZLxbXeUHNeWXKWnL0NRgYsPwkF/8wGPPH4YbvUMvsGPRzKm\nbxr3Ay01C1WF5pXafTrfdH77EljOScJqosRnWtNhr3FpDX5kVJYT0rt+W4a1\n4LgwHz4qnOyKeuBMiAq+Xl1Yd2+MIfESAB0GLfsaEKMfftG1fQoz75sH/cdm\n7ltU5i7CKO6snY7R49r52gmqAKoCg89okjwDdobjD0pG6US9DWPKSlo7F/zp\nlc6V6+oWTrrUsMAZEXN/qrKiezaQbYuC2qV7EJs4ihCHBE0r+WyVhGqzQIHv\nLt1+XWguK2DCEP3piZN1Y8dT3spni63+wiP9DvILXz8TRLrcd+jNhzJHCmmp\n81MJEJXphrXARCfCkUJ0irJEFw3dALsAbQAeCC6SxDWDd9i/gUvFLQcwYi2+\nVy5yo/hWrIwUoIZbfpgfVd4H+B8wH7kC9AkfS7KCGQ8Aedst2+UT2kzOTkEf\nN3N3\r\n=bPlx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbyAR61e5WEn8Uu/gYDNyBR5is+wqKKulTcb2Co+OYmAiApOACGcl/vvlVHLIr4pnyA+JwiuULRxeFBDB+tYOKlyg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.421a6856.0_1589952248753_0.14610101016724708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/top-app-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Te9kLZOqJ/PcfuG2KvRGFFtHyJ6szNdbn4ltxadW5HD68GV6f5hdppe4SF6sng2YM4F+3cHm6d5500KsTYRiEw==","shasum":"e3d3fa95f21d518a97dcbef4933a097f8bedc14b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.761aa6f2.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGHCRA9TVsSAnZWagAAysMP/RxJWT38gMdscI1GHIjW\ngRf6ufSWpzee0bPjgjdXhX3wpyKo1ZMvF7jio8iNVNTOtBGSysJz3ep3e66o\nhqRVDvyZYMbzLAerTgSpyWWpcphaeaki4CmMkRbsH4K+UnIAsOiGN9td2Omy\nZ9ZTtQjIoNYCOi2Klg8uxHMwFRW8KRaboGKfCMB05yrsyW+vxbp+9LWGqQmN\n8S+mZ5ZL0j2M3RPDZOIlIKbtQFhezndlHLUpjgOWFPToRVDJRbMp8Xn2XPm6\nt3k73+L1gJX4gdpVDzE4LQuL7DvMiQYlcagB4eSYsbN2xe/IiLRZJVt/xnqW\ndgQDTyqmlTMWAPzpyvEZvRbiKHU9yhaNmj44sq4L0jQ4gzxmxqBj+sdCt9H2\nmUh+CM2dCEn92yQkrALs4QKud0C6+kXs8SHSAhShiKke9N0LzJfaqEqCftHM\nH0q+0dT+fCK8wjF2XnbGvVNivbOD9NuXQnlvOh/KRSPJGWOGi1QMyNTJEIHr\n17639/bv6uWtzDa8W9vSquqStLttq6A6NBjRarpgffpZPnUfOkDIut1OFBcA\nXxZypUlU7MdL92wEpJgwBT2u8whu0Qlp1j7V0nvIiRZVCUrMxM18JVDqgzFQ\n6X2ZQXPeTyfKK+/aMD8fg8OcEsu6qStANO7x3CVKE8k36n8ZdbQ5MmKeNaxO\nEvul\r\n=3d0o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFm2Q6B2fziQp+k9HMk1kcv7opeEl1NyrolANK4m8sSxAiBcRtw/k6fK6hr0Jt9iVDc3zxysJGmZjcNCY/+EJxmlDw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.761aa6f2.0_1590010246564_0.3173476051484505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/top-app-bar":"=7.0.0-canary.4ebce8d78.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WXcrAQaa3RcmskcyKazedtCAVWhnpVfR68m1NSA5mfvtwDwneB+1woKKX7YpNpBcQ/5VJMBmlHWlKJFdc4MtgQ==","shasum":"7ef7a2fcce00a76a83af3f28bdba0bf0b04650d7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.f8654c40.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPECRA9TVsSAnZWagAARZkP/iccs88vfYfyM6SrXyQ5\nixksAEFRHimKRFOEXgTDCx+gbxpt/Z/2HPlFzgZB7Sjc3kGQ0b3zD88s4ZM2\nXDpyiPpdrjJ62UbGePmTIHRyILrlyOp7XjS1jh0nEXHulk4xDlVTDNNnG8dM\n/OoGM0VW989uol1cQyoX8GYIGeZOsPfvmEKi7l0dnTpY38EpNtxrvCmLa2IH\nn38bH8q39B1SnKdplEcvDA8W77C/J641tRmwHVAFzbi2XxHosEZsH9z24CDH\n/AoEqwcBNLGehhK/5DOfeEuP7TI4wHbyKgUNdCYp3vMSQ5ZUW8pXPOoTf5lW\njAqACBlB7+1/W3JPdYZ0xX0vdTMtLwbXGj+2ivjU0at5zEu7S6nRVKRmnaw+\nOwYLfiXcIM6z2T6OyyjtRKAuLNb3FSN8sBGWSVQmQNdMrPhVNLIWOLpv2412\ni7+QDfeuPGPAZvbXwVzszmYl6tDQCTJbD/3z5oM7Omv6rOJKDaRgxLO8fkcQ\nCbavNFYCvCM44IFrG6ZMUrHnlIU+8yeDygfulyOaevp70she3Ja63ydy1cs5\nc3RUnDgTVXJsWTZ7nuQ+r3e5jwQXYdmhwkyv/3NujePl3/b9kPcug+fbgIwe\n/XjGSvUiQ7WpBAAQloUbWy924DjCBVWJEDYXNSS4noUT3/juhzkuD+K+gSIu\nIrSJ\r\n=Q5v8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgV4EXspsqghn6IACWCaLDk9REDk+v0PP8RKSzEJHm+AIgRRENzdQKJZvmxWqC6j4mIVdmMMxQrz3BcmXupFYpFrw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.f8654c40.0_1590010820028_0.2498909308402213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/top-app-bar":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Yue8VZOfWPyZrMJVpdULQewlbeu4yTTwYo1nnzDSb5aWpRkGLE4EkdhZlVR1eRdNxmCcAtKzEl/zLYe2eOvx+g==","shasum":"3f629c40f3dfa1f33fb28c86264ba7070174d947","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.05f3853e.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtYCRA9TVsSAnZWagAAtA0QAKNLcO/qSKmoEy2bsHx9\nr+SyEgRY/QIXA6Q3leIGue8iwS3Rv27IvLQdO3x2/kPLxDKHsAVdozrOM9YJ\nXy91SJOn2vWPVZ/IV6lD7D/kl9x0KxSCmsjmaWROIFKTCsoaq0dRFSINyZzl\nUfu3jq1UnK1QkWrLsyYBM30sKgDHONoOorZXi0JDiV60a7u0HZ2HrzoAMifC\nqMwQmnLKYqTPpxd1FF/Ke6miGZBWUP4mEcdIMPZ4hXQBqxUfFxjUy+OcknY9\nRLjOdWlyz0LWl8ny91YS6jEqnXBoe+v3XoZhMrA6qoPPL/Xh360OoUtiz+HG\nWG9mqR4sI6OdDR/8noOoGJ3k/sazzpcpC0AirixkRk+yoZAuv2xEf6WBvVDo\nC5lTs2qT10qlle+uZwlb5y6l43ZMnBM2HlZRe4JJMrlvaYbtqZkB44IJLu+5\nmVUl/hhhD3eyY5sW0wQsRVmJBC4FjgZqut6IEPsGQmuKv/Jroy/9sCAdcUB+\n9jK/1/N2CxZCvEh585Rm0uhFVHUGA3K8R2e6OjMJIYlZKUOVFIaqCU8GRBe3\n16bLBWobskWGMll4l2iw34EGWHJb6kwvWH7F8sioO7vmw5deLw+g+1YtK4IB\nuC1U0KXeTmlp9MVAxOV4oJe6Sjj+axK8l3BdD3NQx1HhOqyL7P8/ygSY8Toa\nhSmL\r\n=toCc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJ3wF8rpRKAxs4nLp5ghdSiY2ZvvipxVYf4UXkrcazBAIgbM4f8Tl8UeLSOP0YDU4g/X1V56sfKrssO9K5VmwhTyo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.05f3853e.0_1590082391623_0.3763560276516471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/top-app-bar":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vkUvqbTiU3Jl5dTdksLnafpVMyDEUvz8miSBqxA2YaeILZmzZ+qltFCfPxIe9PenYajeq036Yw1/OU8Eyt+ylw==","shasum":"35805d3edfe0b08b34231f9a0840ca5757ebffde","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.5fe61f4e.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwmxCRA9TVsSAnZWagAASvAP/3UdwxseR53fYqb5qDYx\nZjUkKyaVx2ZSWx/cUd1WGk8dqoz/RqaAgKvTS6rfwnvwffFxPeKaxNUNxYOX\nsfIrr5D3lVlwkh+YN0VK2+LzwwP7WkY11ArL3hqTT+cNtxlY8UIWt+hdUsZe\nMEjeqBTl6rnWsLrDiXJGJc+pstKu+3SVpU4To0NdyJMRMxnelKEQhlHLyiu9\ngUmNCIXcR/yrFt0w5IdZC8y4fLNsvb46MFfplWfXh8KonDt4iAbwo6XzpmSk\n8Y3HdAYJmYfzd+HMEJsJSoCwHS3QoXasuYKLMTYgn/OvjPhiXGwML/7vR3Sn\n1fAxhWSGMKYGxaTu/jnfwCxC15/TyPl3ILm9//28Mgn4x59HVoBv83Z9r4Us\nL9D2tY7JNCXUW2UEUEW9PlzoBqFu96xMnf5tgASG/V6mXkAkH6YaIMqw4RhS\nxasMnBSsigP1wBKwzCgyUfkHu3BmuF/Ew2bvj7FD1iAqNB2EcLCzMznSggs8\nMiKZwtxqujd0BVNt9xYSxyGi1r1DQSAttZGvESY9SIiBNGDuZu3CLlRlTHPc\nUTtQpnbLtezp8D7V2c3lPRSNsfuTVnIQIBbYj8bubt5+NxMeEHNKUSf02/e5\nDVxgSknSdPmJcGpXT7ale5T5DqvXngkYR9HoAmSApbOmbsoqwxD5M53y/I6f\n7ntA\r\n=STqG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAZ471BVfLsSLIaZ2Xssbj5d6Tk6gftmf/lDn9GHFDgAiEAg4t2bqTQW7VX0WKL3g6Az4+0kaEcEeQhi9QVnITK8mU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.5fe61f4e.0_1590102448666_0.2248149510945303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.17d33745.0","@material/top-app-bar":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ASmKqXezXt6i9cGRcyWZFXmD22ajpUuoMCbcCglcKM29xC+cw9ToC802vfhSIaCVdPWAzUGgJ5oYWtgojLu1Jg==","shasum":"cbfa6773c9f8cefa7dfff70763369c1232554564","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.17d33745.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUA2CRA9TVsSAnZWagAAZn4QAJ98qI80WcdGF2VHz442\nu4tcTmaleivmMKESxxqNUbq6lLQMkNAvRbv21sgUBpzgz8L++GC7KfDNvVx6\nu0R0GxFQVuSnypZXAXAzFi8c9eDEtR0mMUaLBN8tIUljrl27mQp8GkCUH1QA\ne7Lp4MDE3IBMZ7D4kWq1Qwf5v2GK0dEFPWT2b877vNOHL1tnf0D9TdH01qIp\nb6FCA3f+9zGWt6A+g9+6sOLY5gsZxKIguhbx3sKLagxo5m6YXiVJJWBq4aVo\nZnxoNt5dl36OHScAdPnUci4QeJ4crMFHGodvwb64AFTnVOD4d9olH5eu9LTn\naaFGXEZP0Zj9Ee+tXRbBPv8X7ZMjZXtPe1XLjPRz+XRA+B+WDGoBWlkJOXqg\ncKPSM1GSpv8Cu6tiKD7dM3MRr/qdRThymyywpsp1yx7f4VNKkKg1igXxTrUF\nZq3qaDcCwqHK/zOcbu5jpExyt6GZkyEuBg4C+bww9ZRX4kgVyN8pTMNza/m1\ngxhl8fAlOiw3zd7qk+s7+Yvhod5nvg0A70CnJFoVPYpyXxKNEaoU7tAdr6DJ\nsroaUlLTbKe2BAVZcoRwBl0oH9eaA++hA7x7Gi8RCcz1Y+R0n/W+lvDBaX82\nFVbuapc/6YEdNnB52Z5rqbz4Rc5ZyhZ3xVdtsA0Tzm7dC+6hxIrsvjYXlp2e\n07+b\r\n=Igh+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjZt5WqibkNkNoDBY8Qu62iqvJa5Q0dd8MqifcFImzgAiEAqNgLCQV38jMJidvwqKPz2+dLqJAPoOxii1oZAElJpIU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.17d33745.0_1590509622138_0.8027879122894814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/top-app-bar":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AAzh3x9L2a3mTVE9223kawssKZQjKqBP8D9zVLMmH3fybfTd9w13EAVdsXkybEnD5LatZCbA8FxNcV/0BoBvUg==","shasum":"ab29d96d348cf202afb25b1c360f348ea23d0391","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.e8b52f5b.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWMfCRA9TVsSAnZWagAAEroP/2yAbtNlz/jb+hiXj7rs\n5LnqntomQ5M1641hVb+rezxs5ObqP4fLLs29K7JQcH3lAmW5VWheZgssf2UU\n6BTkhIZ+Qr/u6piVHO2U0UG+SCxX3VZyFZALp11P79k4nhXT7A+lNmERQYGi\niDZNU0gqlkHQiSDyU6xR84LrTFmnwvIM03r0TTPXN+hOzUboeN437gE/8an5\nB3sXnGNjIOkvepahWS+ujtObPvnBrc9h6Xph2mwFHTvZYuZ/kMUcvT6pbNRP\ny5FeLQXj0pwBqMDxVKC8ixd0GC6UJEO7NV/xDAyEb7LwQDS+EmY68jGG7dX8\nqID0EeyUtrbkTBASF1EkL+yA80iGazSNLAH3C+hC2LnYm/hk+kz1RETjyWAr\n+odZJS1LPhYaRVJRXfOgTdcOdEETmTCbTVm5zMhSLg2Hb7iXXckmzUv72nYI\nOGni8FjvUDsUSqaK0ddzX8OWSvoQ6fNUwLSCL8rjoDhryRO+Qu3Im3CE58KL\nRgBEsQ225gQYdddD2dN2vPl4PhE02OZt2VWA4S7kyOm84tQ+Q7lZeYLb/ZQh\n8FwgiaOTznchLy+ozaLKpeQyRb83rX9W+3/KIB8v6sSeIMGy7hLbi7uJ4sme\nQBtmM3GESWkRIi9Hf+zUURkadydUe0wBW2qRvOZJTiGvRDDFiqbUFLtpltdR\nTeHP\r\n=pAP2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG5pv0Wr47AUK1+M78VpbDRJXbPyvaeQ2c5n7OTfaK8IAiEAqgZGeeJrxby6FVcxdXsq2TlOtkpTGnzCT1eDSAbJsms="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.e8b52f5b.0_1590518558661_0.7589877897646196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/top-app-bar":"=7.0.0-canary.01de07011.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-k8w/gfT4ErHLts6GFR994wRwmU7x43NfFLC5RTPNsMh2kVrjkHhkjdgPFRLWjc5s+r68IBTKA7ggNSJB1yNWKA==","shasum":"08c27940d5366143b628ae6cf961fffaa972051c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.09afa0a9.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2hCRA9TVsSAnZWagAA6bMP/RASnBAoP1CgF8a/Iaj6\nQI4Ij11qrUISAZmG5shxrZKF1D0wEpXobxc4D8hmHg6bBdOrpi+4PCBlsaNj\n+jQk1bQ6uUmTqAP2xpnlXNkI+C5iKWYAkAWcVcsZzxFu33mPM768X/L809E1\nlIeMvPAs4ec+bJCyCFG0HzEjo/1wdPSbqIFTuGTMcV+FYJVgyfSfhUypzjWG\noS+vZHPpRroiuLOLzOtoFmYFnq8qu3jGTGU7RRkjHIzMibR0pvjJb1x48lep\nwhpcGu2PNE6R5ABqxXNmWCF13FTjIYWP/Tyy+ryJUTJA6enEh999lFuxuGs6\no4JAzyPxpRgCtPHemLIjcr0D2kGMV2YYnbGmpy7ZCQ6rXiiRMbAzrRaMPOBd\nnNHmd34RjfwSh4uvPyThaTp+1rkN1bqptODumS+uHzLNtCg+mkgWde0UaDmp\ntM9Vqz9fiBl4UupA8vuoRIVxsZZAa+CnCljpqsuBJYztUbDB9oPWY+KMrjK+\n7xNP12WV5pywvzbHDd7RKuPmOCYOM/KV20dMbPnxeWt8aKKqN0MCRx/4D9E4\n6982Y/omov4r5ZsF1VhZkoMEMggiRUEf302DYdpwoT4BAlWhGeuNy8WXN4Is\n/z1Id5DWg/KwMN6jT6CWxM0RHSgU+7/JQfbId/OwFbJ6Ue78npU/AOZ1EqLj\njnhM\r\n=fntb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjnrQu5o2tDgTipB2YGM6xEk/IWDJ4YW+Luh1aC1cUvwIgchNLoJnmZZ3ZCmn5zSSUb6/FXB2N8qma68rxkdt02iM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.09afa0a9.0_1590529440917_0.7145808737561858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lQ29SEFjoARmtm121srHQeHdvUeLLs1yIsIgEUTXZPpw589mhMuKsVn5JFeLAdLTtNZIcz4tptXpaVsv8I1A5Q==","shasum":"ceb6a51682d56ee65bc7a63a40c914869e3bc011","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.58bc9166.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSWCRA9TVsSAnZWagAAl60P/3gMVvsorDfvwlzdxqqU\niXA2JXe4u9buazXhKY1no1aaM+no/kL8ZILnl8hcOJFqnI4dJ12RlFz6Iwhz\nxNYUX/gnMCj7OiBo5bhfr1JDJIkm7aGcZdKUPNY2YUyMEOBcFcu6JdNCaIVp\nNnXGQQBTEwyUKPEzOek3ZhOvJwoDCrUJc9Au7H3fJ8ZObAlWM0iyy+dkPPax\n+HS/wUtVeErjg922bPgdFew/6C2kLCfGA1ldk2PAAuHMWCfG6H8BNFLH0mIz\nuxRSqlh25wbSXh4pnA9y+RprATVVhpQc0z8Xv0c0XYUPaohc3kOgylXwCD+k\nMXbJjxE6I8+CySKGb7jUtTzA87ablyirlIQr7nRYgevLkpi0r+VEmJjzN+wh\nn0rf+DuLK4cczcIzA1OyI0Ro/XMcxb/wmu1Qgktnk3xwomn/0eeteN8vub3t\nkJ0RXbDnHAzL1ge2g4xJlt20m4VKbZHZxpRPxsC/3xjEGKe6Idfkg48e0qGI\nCdwBmQMnEK0eqrmJFBUiVVTvUhm/v7L1E7QxSY/jfEcyKx2tUiu1x8Txb4RW\nVJrOdI9tHa7cFuWPKTlrQKaXwau7S+3k5hoDItggCiyl/hzkC/Qll2QlrbqK\nXbXjZruukPWHgYJZ3PKJeHdtt40vKKRlhF2RdebE4tnz0LRNPycF201pZF0v\nBFor\r\n=EYl0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExJsMIB9ZbgW2Trr2/6UZ7blbc/ZVGN7mkbYv4zkLuGAiEA21bd/6u1x59I0q8Y1PCgAx1vkz0e9632FPFWTbywZ5g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.58bc9166.0_1590539414053_0.6544038674825983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.43bde144.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qmsCzCEy6p2OTJsa881LGr6OVrueqq87CR7LGzBuVTco5oZudatpB1CetDZ7efkPEjEet2oy5dq3MI3Vwq+Img==","shasum":"3b6036d8fa14f25a3379502ba1a725b6d42a865a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.43bde144.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrF1CRA9TVsSAnZWagAATFIP/0jQxMEFqZvJTZt7kHN2\nocBiCD8KxyRDaR5ewk8CLhOgZlsMor39vh6JnnqXg0mT7RgbDhRCqkcPkWUk\n8KBbm1XdIZxZ8GN0D1TvNxanftfmBxhcwfz9We/t5BLh2H8HEADFDpUvwSc5\nzWJANS6HOuKioQZuHrIuC69s3PKE6u69myZ37m0REQYMT4i2WVOqImLiUeA3\n4pFRekMW23BlxqGOj4lj9zgvpgUSdyd3D5x+GPNpS/H/y8WkzHBTIu63UWma\nXv+Pjt+YKZZz4ddwHRbCURO37VvLVz2r6nuFgv8PtBMiJeKic4Ks8qCYaiiA\nYO/g3bgLJFzykHH2NLSQepwRtY3M0zCzghQCGg5ROiCwcOg7ZtXDkr6Wbd9L\nJ22gxviEW3gUszO1ttE6BcD2op2z4mhHAvhFCe7RzzbLWdxzsRgtjMUWSuIt\nJyC1a6BZZGU5cDgJGxqhhmpXABkGxuEbnGGoZx4kG0y/HAGfmN3wwhQPCxWB\nTpxQCf8qifxLK2iDVDLeXBnssKodRHqAR9ddjEsDp/U3fkH/5VrWEtJZGDlI\nCFgyfbUTBsLeqpmkPNWT0mgA6XNsVlvXU4ylVszYQBRi8p/dXijMVDkj3vY9\nA4soSgluiYkT9YN4g/DsT1cbuZvA3pX+AYSEpNkQkc2D1dDURwC3K4SU9mS0\nUm2Q\r\n=MlbV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXojkTfYC5Xtbh2hhQESt7gq3JWDnFobofo9ilumwwnAiB23uEfyprfPauSdC1IDpTs+KUliCSpgHJ5AXR6I7+BRg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.43bde144.0_1590604148880_0.05304775239349335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bpmYuJxwLp5isOEtpU8FeLvphPFFmfxvTMCDsvMavTzCcwiwzLaz95TS3iRUNwaHpSPVUqFROZb81eTguGZFOg==","shasum":"562c013b3c203c548c2c2efadbb047cb9cdc7e37","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.51067bbc.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsd8CRA9TVsSAnZWagAAs4kP/1Nrdph4KIENhzGJIDQI\nLM+wC00Cji0XrqIXGwT3v5ZhF01SYGHJ2vS5H1NvOO9bqv4rJJ2zKqqdfESg\nMZRT9p6LltrlwMAbjeFJu436Mle08LCUaYgkXG60A7xr8ATtF1bQil+OGQ77\nCyx3ZRKgXeLLQGkJ32VMf4rdFWb/NI6YjMDHCWVdGOeJQDzAnLckZdr8q/qU\nclNlMB09LLRPCFcu7JPeBrQEajwKJjIyKbv3LCtQjJjt+D3S+dBfF3Imgrpy\n64jb/XGuIT9TVibfWTw/SCWlrX4rNXqMjywCTxXW59gyNSB7QqiMhp7alHE9\naSjbk9jwjtbd+YBQN+Cf2QNQaWXVgd6nll2A57xW4yuwWeDDmDX4V7KkwEfB\nE508xilEDltia2mlKTzxhIehjiknmYWzA2Sn4x2Wdb+RpQJFVLFhnfWso9sH\nSxh8kN3UHcMoVN/DwmjRWIolDWBDXSIwHfVCOk5vMEECp6ExGdaVhoiwp0iz\nGO4lmUvnjPX7HH0vf007/hZiTHlJmFOeXZ8HcdHMELmrBlBYpb7qz4zceln4\nLhjztWMsce1/Bqu9BjK/Usr0bI4YrZt9UyTQ5piUh9LKRYmeSmlQkw3n61op\ndv9Oitp9SG7wOgEqH351RcEAweF5xGP1ZPL8InAYWqzsO2oQc+6hVuSpFxGM\naCq2\r\n=5xf1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFAX4cGO4+u1A2GIVTIwX/2+qTTS2Bm3/ogrCi6qfRewIgM+C7PC2FfzPPGfImpH3eiTORPea2yZDg4L5UjHgW7go="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.51067bbc.0_1590609788210_0.531739147101298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nHdv3kqJ7Nic7VIXwK9eyGczssRFvrRGoMMCBFBKrsHtk8h4oawrim5Euy3pnaClK6x8mM9yU6bAbGgP0VXmug==","shasum":"043587e52686201692ad21d0b1cf22d4c0f6da18","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.92751ffa.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1ZCRA9TVsSAnZWagAAdhYP/1kbqBmnTVCAvU5Hhgdf\nwatT68AK5yYweilZrjhWFW32/6M1gUpoGB56BhFYK0XnyZ1ZkTZ9dfNdHjDj\n5VgsgLKvRSwYazkIigBhupnzOLsUMm06Gxv9feVvGVBucliygvauFzPf4x2R\nERNe76IjMZsX0dqS6wW1ooD1BVxmljcmmHkmfOajCa9QU6m8EuJlEd3y9gdS\nMkGw0mEmHrWZqdSdR/u7EiaQ7xdX9mGogdtxMmTE6dGbh/KHUfJPeGa1ti4d\nmylJ4dDJWpWXFoCOtrkDQiVGGoy2z/y4rH97AZjgjI7RgXmbneDucVzQiU9x\ngk+7V8w9LQnouglWIODRJl9JMln1r7uDa5ID1hvMIoODzSU2Uv19E5aZEesK\nEZqhGlYpYUn2Ad611elK9BZRw99piTHPAFkQB0zXyLFSSwmCRO8bz4tsElpf\n+WVb6pZnAtIJ7SadI4iYWBYj85ROOMNB/yPgftNFKGGbbYTgelCyBVA/Dwk3\n5BTR//wFA0goc5zBkPcH4PbZd+tetQZHqyffJQbF1Ryyn4KIP5Z6I781M6Sg\nzwD4FfsFspIgBekY4JlIU/6V0pgfl8z/wgfj1szQm+IARUjYesZUUUmwPrFR\nF6GoQiXsxGHeYnwAloZc+NYvDrO6VwPQrV2tgFyWfbOc/ThNee6I/+U6UsaE\n4+CO\r\n=/QjL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD446JmuBKMVTzstg8lHc7w7DTdboBwB+ULluN0jAnWvQIhAN5O39g7xEHrfSQb9dXIT+niyG4+u2Wu4TDQkjOyu2oU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.92751ffa.0_1590615385278_0.7676598070213891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-W92B12d+22n5bvGNmX7wDvZwQHmWMUavYD4hKRABJ119kWdE4LYVqjF80QQZi8Ofpl6wbw9qUNXdDVJQgWJCoA==","shasum":"ae545081465e2a83a8b79517e4d43de97a733a95","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.aa2b40bb.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A2vCRA9TVsSAnZWagAADVYP/2d++mxSoBJhG5R//f3y\nmUywhvRlnTCSlrjGrhiDl9erljRKs9br91sUjRwXrLE83tmvuy5XJPBiCdfB\nMkB3LSgF5pAC3phZBDV4QF0I/+t7SOchFJ+/oBRhCqdMScpYIGH2qtdIEdrO\n2F38d7dTilr+PgIL18i5Fa15PHwBcwskqxZoPRKOtm8sIFk22qoiEL6HIunI\ngK5MMRDvOkY9VmmoGpnuS6JOMHHIr+FGCzRoRxybw6n50IlHQiC6bRJqAfa4\nVQNLLGnrMBLjDDm44qzFwodn8M2wLrYUaTLIZG2t8aeknxB3cp5Rdd97BeWe\na5+RIujfiIoNXJM0GY+ifw1nFg+OMstIIgoURiFD5Ry+UUCnnO4Zka/f0lT+\n/4RaKJDp3nF0OfUSS7kBzPURVL8qMrt5p4pUGrhkYJPm5glf1YjtHUETmNMx\nfBhxQ5SJUjoNpb8qU3/+cEBNOrNyW1ithqiB0s5NnvANJbwuTZrw8EyJO0eo\nJcYimp7te+p5t7L0pACvs2MHWP2tpUimL3X10JmeFh1Jz8c/+utJv6YD5/Wz\nfNSXNOI4IJsguc1BbB/q6/sb+AeQbk83Xwi8bnJASB+KfHYP38AgcpcOFa9h\ncdkk3V3f0c7uvNlCuyLArdKtpw9DHvRuuuo2v2X6FfDpix5SGWuzRFODWq3O\nevOR\r\n=5dg5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADqL1o4czRZZ8QgZ4PcAbzx+8rFb7AKaKr+tUbTMZJIAiEAyl9o858eJ7BATXtEBiRoacZNEj1ZwgqoviJ4bU7Kf4g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.aa2b40bb.0_1590693294654_0.7919017643874797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/top-app-bar":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xk2akNgP+/lLWHB5MI0THkpnMKaEWFA8g8fd98gsqhUD+9crfJeg6Ti5x87nS8vO0s0Jtz523hK8RqPquUcodg==","shasum":"9274df91cbca760771b6fec6488f6a6d0bcfcd2d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.1a870a01.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqoCRA9TVsSAnZWagAAbjYP/2fg2QFyNpBP7xUqISFN\nI9eT4bQ5mDuPAlQ4Irlbba8vLXqsJirODN+8wor6BQjvRkLqQywG8B5Pprn0\nTwiguMHc4jcNZHuioP/+NIJw2xuNbaf6VVXwxCHiU46BGAF1BQrxMOaoTZUG\nm/dsetOlC0Ni/9an0aqCEE6/5iCHTILl5TlbwDSNTz2I0A10ZnxkDko6WFKJ\n0gZJaC0j1nnoEPYxJXqsShz42q4wr5za85a3M2mklXTglzrVJAoec0RUIR2u\nuJCoSKBXoyxhYY8vabFvSDDHB7G40TrFyXdIfS3z+t5HjWF71rT12gXcOMR1\nAi9VNPMX3XEWC/kRTYEXfh+b4XNDntj+El53afEyHWSSCQo7CYofECrv+lkI\nxDraF037AkHQ2mQShPB9Z3dbBMNLp12UbJZwQH4oDo0ywQZH09kyPmJKR995\ncEeWg5B1OOjiwKcCS36I/IdgA5+H4IJaOLnVCUhxo/k8iS5mGWyDaO5aZ7Fg\nfH9jPhzWmLyc4FfgGYrg3ljQH+c976MdmScMDeF1qqVuYDScrB/rpqQQLigu\nZq8F2XxoU9TCyP1xhkzzGECC2SoI4sR4IUnN0sxcmGIlEuwao0D6ba9HXJyD\nLGq4SR/iG6fjWP6WD7oKwfYFaVjwmIT/M3IZJvRJ5zbiWmdgjoNnNCqriL9I\nRPK/\r\n=6qlo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+EwqjCPp+VnkexY1xP+daOodeRVI7CJZXzsX19+S5FgIhAOmICefOJJgRmdIBnkztUr/FMPAP8M10caeXLsCL58se"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.1a870a01.0_1590700712376_0.04134106398410298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/top-app-bar":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-75fFL3eR8lGxsLsL701da1cuZS0CEL+9cELaKgm/wu4zRBQgdD6k+lIgy6T7eqh8X8CCUZ+zkRuYl9VXRc9W8g==","shasum":"50cc365d1afee1974cf815ec20cc725a83c3a955","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.ad57d086.0.tgz","fileCount":20,"unpackedSize":81949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z9xCRA9TVsSAnZWagAA9iQP/jvzSDkVGPjPBOj/zrsM\nk50YlZNIGzsfCzt+QuJqIFES+IcXb6f26WEijlVklmqwK1zz8DNDGLAOulwX\nmAq4no+sTlGqnxLbGiMhPjpH58kWA5eHhseExG2dLcDBuHlij6VtomxUvLxw\nMVPEQxtOwJrlTfr+ggsEKioqXgnxVtTH/Pq87roS4USUHZ1zox4xvzlnnQEt\nx2BQq9hIHIQueJ4tn73NaN+wNWbcUYzqYapKTkd3wokGXaxsK2iIhjhAaNiU\nFgaFA9fhD9nMPu6IbIUCm5bDwXDlA+Hz0e3bQcIg19QSNW9MBQyqE2y4McGR\nxMXyRjTeoCOBgfkpiRDsnfpBkKs1pRSYNudnEbW7zl0bXZ6rfAl90PA08HR8\n+tqFr26owe7aTGTFrMookZP5xYangHAva9PbZq8OVcHnhV7YGKvg6NPfgFnw\nPHrQVPpgkhJd6rcUP2sQwfI2sufqFRZcEPKqaY0LYSnu7yRbHskpEXsjf/1j\nbZ1XsusUSIMSvY6gJDXpGppbWK9OKlI0S2OUlTJ67RIPbVKSdaUcaoAkTBJG\nV1gNaqioUl7wIltW59gTJMc3h7q9Brdw11A3a7z5SQ5c7Mk1JvD3cUKnDLO6\nPB58SRZuVx0NsMaRdbTHbmuvJ/EzN3xlfwKDn2l10yXlPzNRIPuQzo92UBuR\nntLp\r\n=qQZ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaNbUjefj4EPZ3SthniWkiWFkNxDp8t/59rdg9p6BcTwIhAIFZ4e5jsd1hjQep47MgpH65lfXekaTCOdQYIJKsxgQY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.ad57d086.0_1590796144776_0.6131214896420194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/top-app-bar":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wCiZT+BbwaVNZfxVxRF+A01+b7I5Ggdv/d5VyQMXk3T7QSHUOXZWvoTNDwKVs0hBKZG2REVZdAFfj0gQRYOeIA==","shasum":"b153352a9cd1ef114da035f1429bd3e01e848dca","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":20,"unpackedSize":82468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqSCRA9TVsSAnZWagAAZzQQAJssdOUgk9Furoa+BsNY\nb+zxfcsM8mqm3N1L1eqhxclptOQ9oB0Lfjc4pL1pvdbBVm479G5OTVjwkmzr\ncy+YhtvHuYTvfetEAuQCnTtPNlwnMTP9fKP1EqN//KT4Kv5dhXWts4cR7w/G\nlrXh7f1g4Ti3qkfclb5blYvsooFAfXa4McGnPbHK2hocmaGIBay6CQOr6dSD\nuOgPU1uEeHbrz2qBb3Rty3GPweb+NFIGJpnQQROJQkGfCmEWs/6CbfiuWZzq\nkeLH+P7VHb2SRMoN9wLq13rrPwR3TRFfxbfUIpN1QwuBwKrIXIwTfIrbXWzu\nrvAA+uqVgCHK0lLqy7ECRpx9pDFZbBCh+TppsnKAnWm1+wWF+HpU93lRKFK9\nSwD9qK48mXnpDX15bWFyRT2gPDbo2vK9E8bt9JDs/EupHgqdrEwYDCVeJIkI\n/Bn5ZHh2nmJ97U5rXl8rNJFVcT9NEVjwMHSIEqtHvr0JcXgCWROr6LLe4dDT\nN7SgAsrpYnucbpg9B9SjD9buvUDlLhpcw0qLqHWD5sur1H2QpNh7tKKxH7wR\nzwXRfkAdnY9B6Tci5QQ3IcyoM3nsPaoT7xXaixZKoILiQaLznAPs0WbkdJ5m\nwxdF3e/GHy0A4/Md5DWTDOWvzv4xrrDoTI56smXvg8dngZmbjEtLMU65nVRz\nfGZb\r\n=8Pzi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjDiGV9ySIi76yab2yjGHYfapoyuwQtyuoE2zxiWikRAiEArxNXK72SKcjg/p1uGkOuPyBEShbM6lBtipixpmUT3aU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.3bf2b4d5.0_1590798993599_0.4439645598893518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/top-app-bar":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YI/pWHU8Vhx9HLbVSQliBU3NllnUepC7r/w9oY3FSYEcm3NDWDLJilC6uAw45+OBiQ4giQQKtxXiddL3aYSjcg==","shasum":"34c638fd1eac1d9e346e42b4b906593511db7c32","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.ac05f090.0.tgz","fileCount":20,"unpackedSize":82468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnGCRA9TVsSAnZWagAAZBEP/0GJFQuHqQ008LWeV6yn\nbPxWt3rVwc8akYok2nk7/kA7nazv+O47jx0zn18Fgn8nd/RrhR7dLJu05SVW\nnPpEgfw0b3kOxVDaYggHmeCzESofxyI+IH62VvGgGltLUIHVrM6mJnBqAqRW\nVva/IQBFbZQss7R4N02mfVcIRHE8fkpUbGNGWK2mZkWYCrMywHn0If+Dssk3\n0BKkAgWZm6XnDtx2onUBhUZ7e6ZOIE7ofIhsu/Hh+B0LipR0xuvwiJ18sD7r\nazW46S6MP3mKssNEX+AnWdA74mzeRJd9fvbSQ0qoTamD7F1vdAZnDFyGIDos\nPnkPeY5rBba9NgdrH8ljsiaKCLdVF8gLgsaasruGd8WNXBesiCtBtwgX2S2H\nirk79NVjAiX9bcf3XGRgv25VNTe8ILon+akMGJYfqySKaOdssuP45YG/2QE1\nT0y1PKRIM4ufCIvsD0TVumGnP8BLdDzWQAjFa0zq7v6QcPgh9XxWHCgRa+o1\nhHXIPvJKoLkrjI4JQy4DVL5Edew9dlQuP470ZFqW00wvAoyS0YvGGiLEZNIQ\nzjapDgrn0qN52Y7p1tEE6x4n8saSz8wVhN+/Xw3YOGjwYjl9GKPJNrAnNGjL\ncRuCEw53jYkGmj5uyy35abKsCJ6SU9mpEWkqpbWaxQ6Z0WyS0GhE6UkxS9ud\ndZKY\r\n=u0do\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQg19pMKJOmLpgFElAhhSd4vg4s6elcgglgmfUVvPv+QIgdskDMsb7Be5J+drosxledTMImWELtsGI59od6IlS2BI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.ac05f090.0_1590806982492_0.3672631506310138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/top-app-bar":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZnZUjUujPiZ/8k0QguaN+Pkrc3CZxGyzMgM9sEWx4FjV6CjjSNqK8nH+Fz7VJPiKfAUgnszupHgVfHUNgw2qaQ==","shasum":"78b797c40cca31b2558cfa020845670715c73a37","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.0ba7b095.0.tgz","fileCount":20,"unpackedSize":82468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctZCRA9TVsSAnZWagAAVsEP/A9hZMuBjWyMpG1eWOLk\nMVpK7RHmkHZtJkTc4REeU7wmGcute6TcqDxY1iS5L55dC25I52J9h4p6qkNH\n3O6XlvUfT3fM9sonZSvkQLoGcG5ps2kGPPM46WYxoIpyhv2EAMCBGsYbW6Ld\n7xrKwGF/cBcSMB7yB0VOgxegBmwReCt0JCGarRALHiolEljoPh+QPXL3axPf\nqk7MqgnmKceafCeTxzqxkGB/8opBGM+SVWxCkfSMHJmWxBujrfQXTROI7S0X\nArPlFmZbauHyOlAdqjMRtd+HHOg1Nc3dhFgxDFgtQADewJFtA58Kir5KNr1m\n0mJHcn28MOdFNuy4V0OniW5lDPnn1n0WPT4RQMMxAj4tvK8RYLjRTT8Qzt9D\n5YPOEZG/ZpBM9isG7JU8TPVGowpNnjH0eT+ZABELdKVwkV620oqC/mhjSUs5\ncklZh7CkpM54YwdmBafs6n4QeAe6iYLrHKBxP+ZAOEl4KpSwZZgbdzBYmSw2\neVhFZWuK2AutDd3eqcm5XOhcDWcGKVAPTYCozxsa8EJOES4sb/w62agaZMbY\nLMlgrgJFRAThMlEoMe/ZRmq0YqBOBiaYg/hbSTXmNBGnkDp+bqkEA5nUMNse\n5VDXJbACOaHO/nx37sKn1PWrzbrjRJgzy+A31iL5C290moTWHNL8B0fA/xw/\nufcX\r\n=cAK6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDmsSltqGk6z/SjcrIL+ru4GMHlR/PlExPTi6Yo8dDcOAiEA3hBRyoi6fXMZrBP5LJde4x+9LADbSnKJBQHfkX6h+ZM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.0ba7b095.0_1590807385457_0.364490505946482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-top-app-bar","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-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JpIQtfLLqHj7NQS8o/mE6iTrFPz3i1Iw0wqbUyHd2+Sql44C7nmnVaB64f4TrlO4+SQphnZ8tXWzT8KWK5SDsQ==","shasum":"fbc0a42b5140480813a1ab7024f5c6fedd558339","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.5eaa9bac.0.tgz","fileCount":20,"unpackedSize":82468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8qCRA9TVsSAnZWagAAVHEP/3Fbzzw6V/db8gJxaiak\nd7H+xd4Ur1QhHmqwU3TImLXw6ZGTQ3D98FS67KK06H8p83jHJwd49uSXXgb9\nlOmo2Itc8M3JPieqAqc2zEhIAglbf2hscDnvzYTvN4CDVosl6Vt5cbo1lXdR\nscyqdRdTpT+uor4k/sf8j4Jet7aWKz++ZEOY/UXLbdLxZeVWWlM5IE4YYIMw\n7W+ksDaptzB4CeUOrnc2ooJXXx0zVH9OkJ3SUpnOdRyOw/lExG3VydrZdsS8\nvkdivdvH9uqYRCdqaAoXWrD2rtzsAfvWzGvsCcRGopOFdOafHc2/ObTgweZZ\n8f/qETtrwCLYJ0wBfMXAU0VkZf2RxWBcTA8ru6UUmvfFe7tdBEiKzCMjf+8S\nmL2T8Wssh4AptvBduacoMVup+DLuroXVqi0Sq8Z9Yx7u47NdUVBAz9kF56f8\nV65aJn+LfJG/xE6f4078UbN24yREu8c7umLywr8WRGhhZ64vmenD76cnzMoH\ncyt7o7CyUu277fmQ+FToFNIWsyoigY1hMdjUr/Ce5XuFRCRbA2a4CZhbGXYd\nv4oS2hpuFEEGZOrwbvDHa8zCzejqhKOa4EYKuV3cUWWgkWAxQNVbrfHfbKzh\nVjOGrdg656BRBbm/XjwkwmCys+8y3Tg5hXU8sasz8tZoPrDVrorocnbr2F5k\nZcRC\r\n=rzwx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8ptoxvqBJDEzLDInsk65THU8+i+7225f2AXn7sVh/IgIgQYfWYby5CSkEKMH2PXw7D2AJogBkeOf+MNhbGhpoTek="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.5eaa9bac.0_1591054122364_0.3234697048415802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.5677ac20.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mIn5ST+7HvSzZo5AW5Wgv+YgCeorNK8CEdWKSxikt4zibVor5djzDLlNkxc4Uv6Zlnx1VwD6Kf8pIfYnLFT+bQ==","shasum":"5754c17bc1222a986f9f3f6aaa244ab54cd9c495","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.5677ac20.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXPCRA9TVsSAnZWagAA4tgQAJFc+1e9ecnpjhJaoRZL\nVnHTvq29JjU7n50L2SEV1kPfFTp8rDc0n/SuuFuFexbL8Vi2fL+kNXMIexsd\nFp1D4pyGdkSnpnUiM4xgx52SmCgeu0xGpBhCz2EFWJEf6L6td0NX9m11ZTRh\noI2XIm3h2dXJ9HSCsmtW6Z+qWY55MkZAmxIym5/NWdNSB46aK7wJgVnTMVF9\nzN6dPkrI2XK+VGEIza+TNl7s3hnh4aawAdBIDf87y8GShKjAT3YVcOMbJj1v\nvyV2Z+2Uuok6XTrM6+wOBNckJ1G1tnQ++6jcRy6XY7RfuQnHEanWCOoGzZUO\njpih0j91PEbi+vyzqt69/9qdTiet5q7YpbjFGxWr0RxdseNXn16LHimRtL1f\nYWcTsCRfa5UGua1X+66avEy2stpTI9ml8FryZa72fACKWSulYOCBNgbJYFxj\npSN9OhbJGMjF86zHLyVo2upvsfAxgLJSxPVDj/x8mqMGeCfhxBPFvmxxO7SB\n3p5FSUE+GNpn1Hz7adBc8KFJY03Gy99YUps4ZPXcumZzFA+fnHq+3wZSGtok\nMNRFEi9tKKipgi47lfmot5zF7+z71baJi4pyXFNoYc3aKEKiMP8yRNdvgtFl\ngnL9eYL3Nrdpm7tgVGahGNcCYFN7Wey7NH2SZgketeyWL6AnGQuFXrCjLUQx\n5hGM\r\n=Ut6y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmIh9ZskYFChb2AphApvgt6hnr9oQB+sid4I2lqNyPKgIgAuRECHkmPYhb1AarXbZFQhJfj1fO4+mHxjgCvs3Ib+M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.5677ac20.0_1591055822608_0.7040056915387438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-E0e/fjSRiNOTPgJrVWZqfAE48x7Si5tJ7Ce2uX6j8iua958cdXn2PAwztYexNQOKO0eqz0cCxZ9byZImQ7ZmLQ==","shasum":"953d947c45c2e0e7d6de423a6462b8e34ba582e5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.7ac6bff4.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZolCRA9TVsSAnZWagAAwbkP/jkgnz5x5ib1S9MWZ1AO\nlhslp8s0tI8q6NRVytHa4FrolSaVH3+PHh0JxRxRCLXLkRX/zMZtIffdGpFt\no/YPwRAVwUOn1ldfyDkalySGpNBwNajDDdAbvwqf1FbGQU8flCrpztylFggU\nVf3BMzRHr3al9r7nzLC3hMnJXNFcUkYs30QkqFJA+PwuRIKY8OxBSeAynjj3\njJfw9a/aKIm8gfUAeKXQ8cvKXw3tQVdmMTrSx/l7EhXe4oh9717EYaplu3Bz\na5o3XukfwCO9hsIW8Kl8ZYyOZS05JY/KUuw+LrWSzdkPQ/cgG0HdEc18PJVg\neL+mK8fo7Jy03tMsn7kTPmBAnD8ZtAWndrt6Its+TRqwP76qAtFoDIXRlHHq\nHfi3h4pZUCittu8lzhiFFjfoGzs4bCU0diYsn/OvZOKeGVvQbSCqDzdk7ISt\nJYnFb1o9uQMzYolSDInAjKczTsw7X5aAv/pY+muEkSfmd7vvJjWeQSCIR+78\nDRWmzSO2GKpVETqAZqu638uXYhfaQt/PU7UiaRQarKN43geBFw+TJKjs5rTi\nd8Wz7UQo6nItb/Q4ELgLxiHkFx+fVFaXIq+KaAr494s7upyud3CsbTiRNydX\nwwjc61z0tLoj5v7Sd+NUaSxFwXEvxazeEvQWo4SENDLJsFHzJrymFHNQFivD\nE8H0\r\n=zCUN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFRFW/A8GMnQD7AdRAcbSJFm4wO5a9+BX5TwpQ9tVaD+AiATDOGPIVhrQrOtTBLnnm+1Au3PgkXWKypiUySB630/YA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.7ac6bff4.0_1591056933283_0.26928151230425246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.d45622aa.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SSgxB1+J5cF4mYKIkBDMr/Dde2tXY/OyYTFsxgZtE/DWxroe+Ckp/RIGZdeo4SF9HP5DUOcWWiNFT4wMbXxjng==","shasum":"6c4f72bd7099cbb3fb6517420e4768dde8c323f7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.d45622aa.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uSoCRA9TVsSAnZWagAAWTgP/RwUb7P126lnGtayqGoU\nbYWDijrIbvZtuOmCHGu7QDkCuCW/SMIpBuHE1WddfNrK23S7kaP5lcv1GDoE\nj4v3Tr29IO8Y0dykuc3JLwUA+jTNeJr++P27d9myKrqYjXKQVa95PcsLj9B5\nA4CEpq0ofk/SlWFDq8HKtsXTQgWIDIHboS1AikwvJj6diEbYNZ6uoRIhVVZq\nX3SUQyotaePumr9qe7lMzV9gpbvXPge6v1YgSATGpz0lvhK/t0I85Tr5ecOo\nc8AJB0JnIlUga1BkVpRuQzpqTq5JP6vMqcXmrowYgvUnKc6el+Qk6nHVDlsT\nVGjDkJQWY9WVxDHctvA4vBf/ZqUZijv05vcye3kIEFDDfKYbUKn8WasrBtuz\nq5drEqdAU0nLAmb83yBr4UP9q7hOE3UDneYk4S7wteAc7/332giu18pKY6t9\nlJNue2SWARhxQlGwEhqGPI6Iglkqj2quHz6W/ic7cwmdtu5cIji0y1kVFbqF\nGCdtI0gBx2XO1D1R9UD2kEnj0bC92iFShF6yK/qsEeFvkuteF8OUYhSWzTEx\nLGp9XX+EXdAZNkD+GDm5l2QDzFZyCIyKZWvKZKT6MQsr8qlzVXjVgFp/zKDt\noL2GWe6/OdRPBnA2XVwoX8Oi2ydGgYHAlefT2N0LWzQcmfeZgbVA7CXKYJbf\nAueG\r\n=Mt4v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTocVIyMGRYDNKTO4Meq0Lm/oooiCttIDj7MLoN8a38wIgHppCp58pNIm6pO7EULtx3NqxvBKG4cpLfdyrhJvPZWg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.d45622aa.0_1591141544016_0.8614806264756276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.dc26c709.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/top-app-bar":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AkMybT6y57Y0Xil79fHbu8ktE1RWA2yfTP5eoj4r6hwxhQ2nj0aH325KQu/dD5UH2ZVU4znfFhYZQlxPOq3Wxw==","shasum":"e70276f4c2ff9e576478be3ac0200489298a4bbd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.dc26c709.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkpCRA9TVsSAnZWagAASxkP/0dC66ZmBXFvc4oJ2GMJ\nNpeuYt1meGy08zHZdLLxoihJTfDok2dsP0bX21uIMr1mySMJwnoNcHlz2y07\notsR5zZ6+rAGnUGHEkEOCb03z5cKCI16BbruCznmTCZXDn6MMJtM/ZE9KiFW\nSv/HWDYat37Lm7DEoe2suQrNG+N8ZcbsFX6xdJblmTfOVe4IupC4wsBWn78k\nVL/0RZBvW9AZ89n4JsKwc/nLjYlJDzPRRhHNZ9hjJhFRlTHVbrzJbKuFyHUs\nlqCphFLfCI+/381/8kMyVgMFbxyQZSggf4xX8Oua3J/eCHv8ch0u7+3OEJQb\nzNpn0LHJkYFnT+IpKGm1KnwJHkAOWbJYa+9d6YNoT+DmJ135KUDybBxRzQpk\n4mFhKOp0KHhZ7715mhfbZUBUzqR6GpSxcAhwvATfrS4o51HnC+xI5fUEJ1YQ\nx+jY+NRpNElLwYtJgduKcxwUUGKWh9Mg2ihaj/ygq4yL/SNySU+nFz/qblk0\nc3mPhoh2zJ2h3eUTeycbHBvPy3jXPe2oszYdh41AERvvNc+9M5pFP98HkE94\nymm65X1eOMuSm3ogUk7WaGxviZH7xHrVlYj11YFmNTB1Lj1YU0h2/nSuMQrK\ns++yx1GdaN+r/NS5JTm0VNZ9SmQmbglmkuW7d9C4hQO/JGnx38qZNj3TvXZc\nzM5y\r\n=jGt7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv2D/BqYBYuKHt5AqxfPdJh9pYDa8WJMhFudNPecCO4gIgH378K8gduvyAz1n6X7T3IOnz+hWTDJTas6UKpgXlRtk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.dc26c709.0_1591388456212_0.4478940078676512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.b9baf6db.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/top-app-bar":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bLXz6f2JZwVCbh3llKYLdSNsjpySG4U7ssuIjmaL8EMu4QLWwavLERlz/dOKCPOlrb04xe11zjsZLBG0DsXfzg==","shasum":"bcee134e25e4610112117a88af0046ab7e5296a4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.b9baf6db.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2ql8CRA9TVsSAnZWagAAu5sP/imIV/39+XqByT9JwDZN\nifNBdxziG9McZU5AFRixa2zNjvfH5iT0AEi70v/VHSxZ8boAkb1YoG7KNL5v\nLuCpuKC4mUwaPhBHxVjVSj6XugEWeEWT2YpTcRHWEDzeGndd/eQYS4TlWLjZ\nF0F0X6+EXe20kyK6SnL0cc3i9NNaZQ7AZdf96nM7xLjnFKl8fqJpk+JhVPRg\n//P5cdo7jw1XzBeHrTcxfvRP5ZCYh+RN0p0LmZP1mgAzEDpCcMssMsLKuu0J\nwABtMSnVcpQeMA2Z80DkC3SWGn5o9eyl407mI89sBGPDYs2zVSITEEHZ0POA\nPbXODODgqiPA9RqJ8zZ0tsdQSnl1Jelhs4kRK1ADt13SPEeGWpYxjvD0Rqpg\n20813tWt7IGNk+BVrHqzSWSSlcjsWYx/Tx3EqgGsuhRnNd4MO7NU2WjHkOnM\n62soxJt2W8Hnr9DmElOato4y0n/8VMIO29d74dk12F4eFAV3PdFWOYOyteAb\nfuL6H+fn2d5Y0Luy81fpDnIwzWOH/zfa9r1Gm0YOtIfLh1efca/pH3MkSEi1\nYSOZ5XdUiKncZiPtYfwEoqsbOHP0isyWndEI+Ip7gZid5H2/F5plevOxZMUQ\nj6evmeUMDpYQxtpP/AMTXtJTumzXJVzuY9NTGYhPo41Cr+tRQac3HlVQibPv\nwymH\r\n=LcHf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCE99TyU4ul0eHLOiNqhqKiFkd9l85B1aA7VFb0k9WaMAIhAPfU/UXYA2eEHbnkDBalbr93lLe3TYNlgiVLvPKdbxHb"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.b9baf6db.0_1591388539549_0.1855798338737089"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/top-app-bar":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RhfJLgu0P9A6LSR2gSYoC+Qy8o6AmefdojtoVhXBF74YQk03YoHDfQHEr9MlOXh7Z60//y3j+9hnzW1PD92Gsw==","shasum":"331aab9365988523a4de00a825bba16ca6522bb2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+CCRA9TVsSAnZWagAAq1gP/0Q3RL8qjLoJi/ehkqoo\nGXMti5WnX6sKZY+OQwBcEz+rECuw7Ym23Wl2/tV4R+dJDASHERQEq3kduZ93\nARxX9v8jWxTh+y5KUVzWYo94XPxdA39ZUSgHFx6s+dHsuaeT/X6Qn5YM6JRP\nyOW14AcdQEHV7dfPcC/UxFthBR9VXHEaDo77npwScyogMs29DjViVpslkbFH\nU/RpuqmUcDzalnwv1OzIS7N4EA1T6c1gYW71lpuMeBiJ4zDF2Z04vIl8Odra\naukRR/dMdygOPqVIDc26IabcO0xoBKnqVBZGgIDjFuVL0PkpN4bMEB8+10C1\nZv8bMaOKdd/ojFJ9AtA0JiyYeS3kRTWiqPgU6zhOnQkjv7OzqxE9kYd4syEp\nWQjFHfxUlYItw2witrij11ugP1fmvDTrGJMNxVJ1Zzhvh1yjLskctXnJKJmY\n7k2dTBZebMlsWfDzLhxjVofqDuojRPlfNj0sW3TcTffd/87ULNSj64R3Lh/l\n0M0/ej8JyrTZkmRqGXyVnkGA1f5SAsG1z9U2CNr0hMTtr6ogAHT9BKMdeTBe\nsN9o8gFeoApFEK3D4BsKzM9j8AW4NxILfkw/a/5TAvh/feurclMLIENjWFvs\nJj1mzwjwRRjS/GaRVujw2q/YFgfU+cdARaoag17RUcHYNuFOB2kBSGDuNqOv\nY6O1\r\n=qGrE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfBcBKEixsUZgHdQ240S1nrMAXr9dOLh3VdI5QqD559gIgSIPsrkcwKndmiMzKD74bl0OrNcMQBA755mUdya3rBfc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.e0b8c9d0.0_1591398274237_0.04913363783138158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.51552859.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51552859.0","@material/top-app-bar":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JOAXGruVhysrdbUf289bhLhg0ZukV4XBJ3Awt5bSl/ljUSyObKnZTMrnu3D0xPOdi8oOBgT8OKoFycsSm8x80Q==","shasum":"1d1c8c0541f255e2999050b8eb6b8eb15f9e835e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.51552859.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRdCRA9TVsSAnZWagAABowQAIVg6NjqLhpqD0wmc4Ud\n9e21PtS/yPWL4vLH3c5vJDi4OxIEj07BeqwzB0UwAY8i0QuSV6djH1g3GUOC\nVVpwSZSrqg+XqzrUlihnxj8q49xUnxgP2/p+W3UQ1mXUCX4YzT8rmOHJG6S0\nqIZRYcq0OQ1LsR3vu08qc42gu8tz7yh/9neTjNHrSr07GKCtMgPEYeH7lgGY\nQRbw8NyVFYb2oQmRL/y3xAGubUCmz0qZjSsOXAgp5g6mU3hbZ7oO1b3qG7xx\nXn32PiLjfMCoyfpx2sTfcXoehmXwsnaBTdXNLNktXVQZnM+TLg4n/gaZdV+d\n5spNzPyPrBdJLFq2Y6a94EgyzezuJDZx/VI4aFUFOO6zmqdiBHEmKEPpwJ7L\n36oRBdKGdtUHimrsg9bj5NDWS7GQynUH8LUACRSZJgtCLSSUizO1aAd8fdrI\n4tfkwABgMnKG5SjhVZdF4Wbezh3d8wzn2W4N5Guq73naf9mEOW/Xy9x8kkWV\ntBoJI1UFxxEYZ2ZspVzfb1oipZJ6WwsJP1uRhN6UZLN5WQxOv4yywUpnRUJI\n4TUJl5RkpIBUp+aXwF3PQ7RSlkQBVaLvKIAFZby7X86htqAlK0V1ulKbUWQ2\n66wePB/l38g52BXKmiioW2vy3o9uUTb++a6R9YTN3FCYKHSXuNUenT0OjlWs\nE1FP\r\n=lms1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI8uYZmes3D/WN6xy/vBeA6uKTu36K9Sh2ILt4mgbijQIgJGi44AC4Hy2PBeRh7PoMkmX+ER1iUAq49Scqzx9nX/8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.51552859.0_1591747676696_0.6207087943427605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.2e269285.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2e269285.0","@material/top-app-bar":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ux7QG1+jHJ7o/7FYwkwfAV/3dYyUQcuSU4hHmPOERJXSnmS+IdJN44X3wUq8YSLYdvEkMDVoZhGzM6QBXBzl4g==","shasum":"ba179a2ddaa307c9abcc06f175d4f4a4c5567b79","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.2e269285.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjqCRA9TVsSAnZWagAAPMUP/iEMiJy2Sj3gD+QWrfm7\nKxW7UWUHS5jtEQuql8GIK2Na0kHhRP5kCL/pZJGyyOCmk/T0L3XGtghhpDZz\nR2DYzRrceiWC426cInJpp+87NSNWm1u2IS/9E5WJMaSQijnOjAvm50xVQESI\nPHNS8SxAJhU7RsJ1HGER+TilqKmj2JEbfKjBGkdRgKY93XoihXgd8dozo4jV\nq8MZ6KHtaCsJGA8W3/s3jKdL/Kvmkp9TDYYB4fDQZEIiUD/KSq4VBdrIXkr2\n4fB9kB2+b8nMuyXyGxbfy59NaRXvOz/0y6xMQBsE6pMz80/jgoQ/QwkDM2b9\nxEXC/VRD0OS8yXAXdINXYiincSU2FCYg0RokohB9UwsB6pg1QtndZKyTinGH\nLPMvvGgBEkJDqincQHuvyeNXjxAPhjfyO4etY1uwpKdklqH7FJbXCCOfM93l\nV3GMCyw+1d/7m6/4obnBvlJWiIHfAFf19t4ESq/qLiEEXDbXSbMN1xgWMuK4\nSF7b1hUW0evs8gPLpeuM7ytN0RDqmr3UrdT28SFUhFSDnlLGJkkpdKGhVQE/\naFz2BqQic3WOgwMbIRFsXxcGRyePcl8goZAX2EuXXWNywG1RbYMglR3GyFez\nmohwUmTMvhCk0pJh+kvad0KtvIR06Tqz9Y8e5AOsW++6vVzsqyoN33e4mnoh\niLrc\r\n=GraC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBF9KiGIMZOs0o4wDvVnxZ/Dq/WhIvaVz5z1pBuhtUoQAiEAm/UkN6sEkytkhVph9+m1vU3BQGury6hxs/qy7bOSsTc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.2e269285.0_1591752938565_0.46389257347294244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.be138b01.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.be138b01.0","@material/top-app-bar":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Cpu/ZXXASD0k+hf0Eq5dxUzF/03y5Vyya34ftliLZI8V68CWbBrNDZbdX+1/f2YVINch7NjYTAZpjAq/W6Z3Ng==","shasum":"8d4e2cb67070e1875d58f157fddfbf0457b8232f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.be138b01.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4Uc9CRA9TVsSAnZWagAABBEP/1MGxsrV6vx2ECDjj8Yw\n9TJnqr+gsl41K5LTBj7sb1kh29e21t9UfRafO4l+/CwILTFII7DjwVShDwz7\np4aZUEmekzD7J/xuJZ5L8DbgCicA4qH15Dn/jCLmOGBH1iu91zm8Ev8YNkPV\nkGPMsAeoTJwoi6a4rIN44hwo0lgheNKWOTzX7uwgRGKLBotf4rYCoNrgKy62\nOjPuz79NA46IdG3bDbFMXSFeqnunAdDCsFcaSeQ4/pUQSNxYFXQa4LxM/HD/\nH4VFfygq8q+JhSU9KNssAtxQ+lGXrSvzN0xTyrbmKy9YcjceANFrWVAeKY2m\n5z7o1Ef21bu9vYdwzDZLRGI3hWsDgYrK0KG+sQVJGbTEkv76baOriFsmc4+X\n5kGcmVQ5Q6csL74bwhGqWmikR+MOcxABxFLBc8qXo3oUEAWf1IjcwmvK16VO\nAYh1vfmjTW9KMNu9f0+ifN5LtkjUTJ+6wcVWMKr+voRccOJtyjAAHFr4j4Uh\n2Vac5XObeVSnNq2VUK5asZgbSG1MedAb2+3IrYthxgukE3YGGbjVQFDhi19g\nMwOvj2oiCJgtaoyKpCXSSuhRjkcLQbhPdOWvp8mC0NxTjSejEon/uv8nZPDq\nbQW0D8VbkSZok6ZWF5uQ10dvI2inEtV947ctfroOfVmJxlhMSbMwnztS+40q\nkqph\r\n=x6Iv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDfjOx8ojQqS4553IbVsWUpYviS09/GODXkRG3AgYdnhAiEAzdff6oyhgkVQpB28hCKCSDf5Rh73Q04VyHahCmdOWhc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.be138b01.0_1591822141012_0.6136347197545917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.04bccf5a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/top-app-bar":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9JOkNfug2pSoiUrUO0jmrBFypyVA7TOsU0t9fpIUw1hT7QhIP8I83DRsOZEkXCR6JegFtg01lD2XIk/O0xEzLQ==","shasum":"99f33dc7aa04f874691959a3c70343b8db883ab5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.04bccf5a.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BkxCRA9TVsSAnZWagAApGoP+wauGC6pqRbN25NYhpbO\nGHjYSSeUuXw2mdkSno4S7CQibnSaI+1otUCjhmqgucm6gZaZUDx4ZwaJe7qx\n0VuU0PIm/dSgXJjpEQb9d9wZw+IyonESVsVTlkWcflIJ/BicdFOh366jHMVO\nWJXPSCMHnBHEXaJj5CDFcvTKXcI4DOCCUXqgAWOOAoZYMSKIt9OyS1efsy7V\nZqvsUUYptwX0rBKoTFAWJG92MAwK/oOB8E05b7FzrxPRLnm1+8d+VYQ9Edek\n48KhfdXa3Zw+RaPGz+0iW4uWYFSNMnzBZgaoo456tQ/G+W1Vhvq+fXXN0GBI\nd+72aR0PUKpVxSAUe914pRMCYRW7mp9kLc8dp2xJRMkQg1sLEtWgoxwhxy04\nsadWsb4Kd3FBT8ARII0CdO7OQ+RppE2gaS1X6LubacgD7qbis48XH2dbeqq8\nO9BFVw7pp+Xnu66v7YGDz1nuM99TlbaLkNiW9G14Z60PT/pkRK86MyoxMfzl\nEqWYOVg6FIuIakWO/AwtcUZJK90FrTUmbX86rfKHMJ+C/NYEPeEMSyFndI2W\nwctr1U1U1IbvKveyYMvDgFVRQh/hOydkHqJOQuZHV2L9Ydtw26cM3EgKwBJU\nqac9Fd2ZYkP4N2mP+wohiNODhK15BjR7O74bMtFbkqHEmh+XZ2qSE/YKac+Z\n2BoH\r\n=OwZM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaz6eo8qchGNgYUJkKGH3WiG1BrJjUynhoW+7bByF+xwIgVAD1ClSkfPsnY9ZrRFXrzIC2YoIC5T/56w0Cn3NuiD8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.04bccf5a.0_1592269105568_0.2981144575999277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.b44dea36.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/top-app-bar":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hdlKfXiDfhY0sUb4ClElzPtSs9VDy9Yx/PG4uEnmIUCUsV11YXwIH2BOtYXUWatdZPTLDewiYuPIYT5lqNGe8g==","shasum":"9fc22edd08b6f64c6bca3eb07a48f4efbedbdcb4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.b44dea36.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJCCRA9TVsSAnZWagAANmYP+wZDWlQXRy3RvHOUhXG6\nQSU6BxP4Qbx4qMZRM9grgBWjHnyB+fTuhuJH66qLkqFWgUzAbA+fcC5OdHTm\n5QXF1mQScbmNDnKw0Q1pzLuX4JH4d57KvKJo3U/+8lG1j4xiGXdagezC34Nk\nqvm8WJSU7tihNuySpZ5HaQ58O397FC3+XYaw8ASzzdiyZqEb5gi9BgeYvPHy\nxtvijSoW5CcuRp1xPgNef8Hpfo8oOKtHZVdGlH7LLqpqJFccF/uBLWVQSQg3\n0BcxtzO2jkBQldptCTh62JLo/OnXl/woqYxdBWxwXf6Hl8yqbjjI390/FSQn\nHTsLztmopv1k16+Pbq4W7cosoLnYH1+EJ0mmrtISEtdCnyHSkd5S++IbKPTv\nis3h37K9ADiwUG79Im0p/1rPfHsIvOMvpANwZjpeVomT+UxtWUfnjMauIcBE\nLHwdkCgvvjeGNpFVg5O5nI5/emhTvhVWBmLUDXRxn/iMquofscLmVe510Hn+\nE9YoeKfoz+2lCi9zHwb2saP9o+Sf1DD1Kp1oo9htls25DLgGsAQqf89QB6Xh\nyDvv6zKrciVaCB/FMMMQn4KuyPCam76hOjEK4w2PckwBeTencxXICZNTMGkd\nAZAYSlndN/EtBPEa172E9k4vWX6CufMNQ4hgkmm+ktctB9+medQwSu0TkvAw\nGbNy\r\n=q8ea\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4zE7auE8x4Q7ipExLi7tfLkgHSchSBvf6GqRkc20zzQIhAMx9wKBfStTv+GYmTuY1Q/ULMAVaH6wkzUEnEC4WYHjB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.b44dea36.0_1592341057488_0.9027599651955582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.e2577e87.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/top-app-bar":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CXGOR0OvqflsLAVmmDQtVEkgYtFeQ8SlIS1mYiQkSlb/1RkjHF9dEUu8impYAPXKhizeuEaiWTYmXtL8v93Z5Q==","shasum":"58b2f78efa6bcd2f569644a9aaa4deb490fa46a2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.e2577e87.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTTCRA9TVsSAnZWagAAFuQP+wRjYDUvOmG+nHxr2Qc6\nFaZ7qoPYzsWWalX6i8Q/qv/zOLeMzefDZjmuwE2Mm/nuj2SqUwem/+wUoKfA\neWYTqy29Jjd2hQCq35A7vYSBm4RiMOpQ1Be0GKEDCiRtLPadVosj8YFForNt\nXyKiotl6lA7uF+9dgK5dhEl5D4UlFdNot5hMfuzHBrTdqWP1CLzNXQe0qUnD\nesP2zN6lKUz8GHshCRAg+H+ptDxCzG293RrEpcvFsqK06pwwGnxF4/c9bSZI\nWoyNX7lpCG7ij/rmM73XYD8mKdQNj7Nl9SgGqZ27KuaiXn4x4rIuEGUW+6gg\nZ0vX1zFys0kgKFkAlXFBB0AxD0KemA6kQ/AXAmqBnfRm5u2rz3utCZPOeEQ5\nGgSbytPwVtud1icY4/6I3xDzy6Tmj6msgMrYeuLab5C98+P0LRCzMewiKIdV\noo3QdFiWgkm49uoUMV+vXg23lfs+ei4RDNZH0PJHA+jVUi1gsp2NdROSaRjC\n6qqrK3enJVbKxPNwlq+SKbaO/pcjGsje5BSiVRZwg5zwDtyb7vvUnfI53zf0\nBwuLxDnf79MFKWYcYXvPbKpv4n+KSIKHWwbqNZRMDv9Mb6jHgIgsyBJEkYfx\nYii+R2TshiPp41fYDHM31cYX1DJoyekbbCQNrjl130K6pEsHdA4BnMnmp+4o\njHLh\r\n=vKY8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXDxEzcgdIBv3LW0KJ/7c/w6Zy5Up7JQtt7qwl+km23wIhANCYSMEwNZc3Zb8chWbfGUUexrWvfskDHBi869AMuDKO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.e2577e87.0_1592341714755_0.3951938285839445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.58b73343.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58b73343.0","@material/top-app-bar":"=7.0.0-canary.3aa33998e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.3aa33998e.0","@material/theme":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tDd1J5yLXAPFOLxumavoEuTWRonJ5GbSVjWWGmNLt1DVgxny5OXrANspfWTZTSf/lxlofRscfHPXL3g3Zdz8cg==","shasum":"6257d558cf384355f883a5806ced80247cfaab45","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.58b73343.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThXCRA9TVsSAnZWagAACNYP/1DAbkA3100GQ4LjL3a7\nEbQ8wR6LKzLLnVko1i35niMDeiqqTdbWEuhHj2Rk5XbRMLoiTjrtOBR0+7ec\ny5Kq7kUtIsByCU2N+dhhe+JZkbakv8eJvmldbNTnVRuL4RrgClsaOgChRIB4\nxxgJNbqMZ2m6CxtawpjOCEYJ3+vlhYNZMayO7l0lctqk95QVEWumcb1OU3T/\ndC1fO1EK5FiHXIoU/mOBdz9FiUfNE1Fb3YeZiq0QIfM/z4l0mSat9dqdmQqM\nchsMlNTSubYL4cQ9n70Nepn1eIAht8VetiJTXufO0LxLCQ7ImOXYDpX3PDdB\n0gO3sPD2lmghgBKg1KCFFMRdbPBJfpgXwfZ4R2gi2h4SJFT84MDfYoWt5kux\nFflhWVei6SrQAH4IzroubbXkc0AwYoCIhrjhx6tpMuygKSu+MmFcmLl9G0aW\ngjpOcl/QHKgDtiKhfNOV3PNgrVkrzexATjDvBL3aTFYwDj4yPqbh7K6R0Hlz\n4K8gApzA67gyo57EHMqqzsdCu7dZtlACTkBZjyD/LE/Z3MiuKaYr7d+LhYhJ\np52MTQNsORztTpSl645qMHN6yZpbNYwv215jE78Rn9Henx7x/6F+JTMlMlul\ntJtZAG4K0339VFfV0Pta2EQ7Sl6xYvP8/FB3u43kES55tbiy1yD16B36cuiV\nHzOG\r\n=yhJ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDmsFd8LWntSf5+8wbbY29AyLmkWQdK136h+OLNhfFDAiBV1GvwIbuFAUdkOjuDDUh6SiQ7Sn4ZvoBlHroRnU9msA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.58b73343.0_1592342614607_0.502566073341058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.f155c058.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f155c058.0","@material/top-app-bar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-A2yi4vCeWR5v06u9Khd2uS4DxAVa8340hY0T06QNptVN57lCKU2NDR70Hm/rIFU9IucZb2SiHh0FsPzjNwQYqA==","shasum":"658f3257ee466fe36301dadb81a5ebf209bf4be9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.f155c058.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe661xCRA9TVsSAnZWagAAXxwP/R58AEyWfMDL1f6ssEwf\n6LM+OejcnM8O6X3etsf71SvpYlskOyn3nFTZD6J77h9vkqJtNTBTlrBMEFjj\n4xp1GmB6q26YlAVwvPQvyxn7OjbfqfTyrWl45qgqu1iFL49qV8OoiLYInMUH\nfpLbgSCU22WNYyW6hD44u+EeUfX+gWzIDcnti3M2ikOD1Ei16XOfG3JqKlPo\nz/jYsKJk0Ymp95sxyMRmkD1FyHM6na9Is6XhHTho2dqjoXqm32hx3n15V3+D\nabsdLldY6kYEWSS875FrxaijsmtILhEwCdpa3qHSiw58ty+C8GRLGutJCXy4\n3sFyGVQVMotqoNZEs/5gVtiFZ3bmSIFV/be2PeGHYN3jW6oEMv3HzGcTZjh9\noM55m8e3jPdR/RPzqgG3SXqB5YuekKJxk2DeLngO91ab/AVwEDEiyy9ZOxFP\nD9BYaF6LPz0AkpOni5cINYxhkcxupTBS6DFJ/B/u+OIm0Fne5MACjRePt3jy\nZxLkqGnGb8pQLurUtQ75OVJ32iiVm1OxR7FDeye4b2zW65RkoSUbcSg6RfJ8\n4xmG0H18Q2lKRvLeR1YHeISHUdfeqLyMrB1WxVsXP9qAglLr/5ZNn7wQIiKW\nYToC0CiVIOQQltxoEpxZP7IzdT5i5PdbtNEQ32bSbO3bOEit1/WDAWDl4Uam\ntdAl\r\n=hgZS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFfjJlzw0dD7FaKk5L3qlOOtVG2nIGPyB8Y7cBYAf+Y+AiAcjxQS/G6TCYBR64LIPIoz3zD1Doa0sk4zM5/DIGNN3A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.f155c058.0_1592503664611_0.8401552457780339"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.309779d2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.309779d2.0","@material/top-app-bar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ScYiihYHYc5/99JJLLUF+l8RxqnfKYIP+0o8Vs9u97I8bJzkBdGX2SVenmmaKNZeZ3+CZHISpIWwFf8X8fzgrQ==","shasum":"8dcb62eb4234f6b0db2d3e3d22500f839f5a1118","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.309779d2.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+lCRA9TVsSAnZWagAAU2EP/3eOXJjGUsN8D0MES0m5\nQ246n3bouUS0dqaZb5wa0x4aIdNbdbPL6lgI3B65URSA7ckVE691Du7dIMwE\ndCg///wMP4gFizt8ZMEoQd5UUC95tFJT5YVzyhXKGQofx9BKrY/mzCNFTRiv\nuz1JB3xMWsXn1WXkonZAGo8SckEezmLVOgjVwEZPSrUXel2FKTwCg+iARz9I\nZgjynzzrEvn6JfY9bFHAvxmKBRlKfxjfvOcX5LgS8qXogp7Qgbq5xZlYhrPi\nOEb0F/jY0nwpLjrrySoBB7PJeRCLSBYQGLU1wioKVFGpyFVghGTVh93GgmPa\nq+AYLboILM2iRXr15/05y12etLdtqQT/DXUFZjiiKMnDQLf63sa1S2G1cIhY\n+CyKrwvh1KzWRsgCZR4lQ5o4pRcNoWo/SGdymzzscwhAXW3YbcJZhI4Rx25g\ndj/nCkhrMn+AlHRf946kXsZVM1r+pEdNWs5bOJsypxEFIlrToZ2mfRgvWjgM\ntu9EMM1OdEHLk9PZa+uM+fjC9DnId3lhR9HXrkewH+7qKl1NinV3gs5fb4ML\n2xjEqVCMKZ5+GGX0Y5FbfTnxcjRW1mtT79n1yRP5ttwrfBcvAE8y7spG7FPc\ntieNFq4uJTowxIe7i1FhaxV5/6IWWzer5HL0SJkLnWj/8zDObgz+8zXedZ8N\n6dHG\r\n=EYQb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2XNM59CFjKl4Zy3oddI7KNL54nHx2cWxBMdPBav88hAiBUO+nmePC1RHX8quKjBgKaYD2BFLwuvLyyIqVt1pLVEw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.309779d2.0_1592524709503_0.04421130319722999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.e7649968.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e7649968.0","@material/top-app-bar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ifFUvy6D4Psv2JlxB4HHCrDc4LMwjCiC1+va3HdgWwmZ9P1eHE7kZ4S+jH8+lEPsdx7C4hVXQ3plzUhHgrZYAA==","shasum":"8421a05e762f5aeab1f28d22be6e8b4f1675970c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.e7649968.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDYCRA9TVsSAnZWagAAgAoQAKNl33AqMzKjy5GVyk62\na83sNvWxEuyj4rVBke4ii7Tg7eQWhVEFxJfPUZ1IKZht6rZZ2n+OPNK4DR/N\nWNr6qjgLywQfcs/e58nPDoaU/c86QcgInwWUxgIFavq46ZrX4zLsaJJ8TtRM\nOXjSpls1Mh6vi1kmhWm2QyURjlIpXDxhQ3cHlZTwlgXUW66pDuYy4amyRBLU\nQYejuYrO4a6J6KNFI4f7VH+j05KpdYbehcnP+Kuo8yM2NTGkAD3f6riBirE4\no2kW/rGf2E1fq8nYqycgsiU5mMd69Dtmm8ukh76H82b1R3coZRCR/TJIFcnf\nXr2s0E/wu2ZMrKmVU5ovbdgMNXcEchvwetqmsCdvfEjA7uTsjOsaaleQmMYT\nppO9EbmNXbUznepw6jWC8r38b+37I0CQnz9HNbn4vmztiTmwdKR3jZJS/Xd4\nSs3aBBNZxxBB1Cz7YOuPuk9DYmHteC3P4lANqBFvTNrMtoP8Yw17sJ7hW21l\nEwUhhE+0fssOoHZhvu0/11VMwqAGZh7FmT9ExEI7TUS586hgFsHPAAbRx7WC\nBeGz8uZ48Tbcbc6yvBj6HtbujnyO1oec0MTbK8gXBN+CGr28WwczVcc4C8Xn\ng6MXc4s91Pmaj5E2wwqHStZ5rX+0EU5jytP189cwTYJGRr90FeLaYY4zMBi7\nx2K0\r\n=TVaZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFBUwuERxxa7mg3AFdKJlqAzjJNQ+Ej1DBdUCPn18fRQIgSIEAsd4XL22k+lLlpk+v4DF6oH6d1pU/l5M57EkjXic="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.e7649968.0_1592602840134_0.29227094325373537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.8e21c78b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/top-app-bar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wsQsRDTXZZOb/Tdb8WFrf8K3mlZ4e4Fi1hnhd9kvacN0/sgIuaZ8IQSqh9HE29pzu3f9s4gK/cF3TfBiY+BBww==","shasum":"020a5d813edd43d57f3f777ed0ad4df3bb37fc56","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.8e21c78b.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8InyCRA9TVsSAnZWagAAq24P/2BnUZAeGbSaQZ8pXkl0\nFNVuq/SU3Bv7Pjk5DxbdP4W7QVCkSAYEveLPYH+ms7Np8eHacHTMNFn2lW6w\nendHkNAxlLmXmzJGEb6tDU8LhtNgmd/irslNRBMCPPxrfdrSyqE0jI7fBznE\n+WSjHcvMyM4c2XrYXd4oYKNdS1lxtMR+irtcXzn7PERnkzAd8whWLl9Q822o\n23H0Be6GC8XjWLxyvLv/5sCfCxHILBRMaDBVBKfAT//GzD3nXQzQc+mjufTH\ntVs3k64jCEEzxMZdBUM0xQiuCdkn3g91K8IVtrkWaVM+LnRuIWeTTlKPvppR\nXJpjoCyLYjkoB0tH3MKWPAxdZ7LBFuDPe581mjBKscY7+j9AeUYA8vTNOPnx\nXvQaLV4nHX09BtdeYVPbfLyavr4569nuPBuARSdxFKMv6ythM/XRkb1VlTLz\n70Jzrpll5bQl2tJE8N+GXp1PKB1Ss8gzHLat0/ic9GzvzHfzxZr9sWG6YgRs\nmCZoNs+ZhD4ap/RGfpYVGUnGR5dMMQV107A+pnXgkkJ7F7Zq34u7dZ2rYpzX\nLhjg4aD9MXF765SMDWcWOztjZBAu1dVKNsdEPdF4ztPtYVyQ5y8yVS9f7aOk\nIgj+tHZ6gAQSts5HYkyava2uxHzmw7n03oMmclWsjVUgRCy1QCQsvkzJVmzY\nU5Ss\r\n=JCTG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxLYjcy4JmSVYS66bDw0X7Ud/xrh6dhGlvXzlNED15dwIhAPCr/+NoO2WoXkmuA++MOtPncdUjRaBFpN75gq0EyCCQ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.8e21c78b.0_1592822258332_0.08338306006695406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.6db76faf.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/top-app-bar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-uAc51S+Er1fVY1WMvweup+8AD8rps6FDELyCw4nEbl//9Bznat9MU/x759oqMBcdBMs0ENFBOQgOL5RVZXmNzg==","shasum":"6699bea55e016bd188d92f482b9cd36688113e27","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.6db76faf.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7HCRA9TVsSAnZWagAAqpIP/RQMa/YkDAo7ac6ucG7v\nBDOs6XWA0iC4B6Rfyq4oDSHiTVj09WYnB166TI1HnrHnEIEVOo36bPiTm74E\nN4I6z1/n20AO9u0QpJZoRuWjVE2woPpseih49asuqRnfDBJ4fqr4cMFVam1q\n2SdJ1tg8na4mGYZSxkVd/7wEHj3kqrZUYpa8/OwyBlmwr14SvQpGzH5+Uoj/\noyFEdKNxBxDuOANVFTmg+iMWfRDzorQcB1aGz3c8IbChNpSyK7a5yi41fHAn\nljWcF5Z6e8iYbBctZ/5PGjtD/zTK/OYnHEXeM5N5V0Aakh/lTFHKUcS1fpZ0\n2gFW7RzsIlX7NfNRZoWlXH2EYSixmuzmw+S4KfaA+5VzCahy8VaLfZQME358\nc9amI2PYE5njAQHXkS0KC+V0YETLUEnkoYBaESlnJnbe4e1WbStMymo78zAU\nHnRSmMIQE/I0enV5U/mlJAuYKn3ATJqp/vPlkWrL4V6a5ZRZvsrfIwm534Rw\nXl3ChFeGn1IH1ol3CVp6GCwuLoEc911v50/diveNt+A1t9LylxDlaPFDDFmn\ndVIsnV0e/8hfbDgpjzvVoM2zL5Cm+o2e1ltYKLaAvURR5cNeb63DBMQF1K8D\nf/IeNSv4uwxIXgyqkWXELhWfM/eKnXJ+p47Bqo0UXPMG7mpwFK1pnESUMy/T\n7eRV\r\n=m9Jb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD031GlXtnI2pC1EkWqIjRyKkxK7IlVwkdNpL54a66pFQIgEKIRzIyEeCA1myYm5JbCu+4XIAI+OsnRsMO3wRoN/RU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.6db76faf.0_1592860359249_0.5550023694499067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.c4dd9684.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/top-app-bar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8iD5sOOF6pST6RujUbye+Pf/+BI10L1KKseiNP8AM1ommeYEqFilYriQZ/vIDH9Ujy0nrNX/PRKAub284qW7jA==","shasum":"42000712346a74680b6b6bc275a489d216ce3cae","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.c4dd9684.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hxvCRA9TVsSAnZWagAAl38P/30UGUdW/suAbX4VR6IC\ntAQulO5dn8jLCvXWCIgM5OkQcOlqnS+DHwUaHAxVhJAP97JN5VI4Rc6ZzpFb\nUR90kYU/Mz+RYd+8EpL4fQKy0R0waVdMrgMam1YzIpQy3m4hXbap27RpDXG4\nZ89wtLtbfKNoHZgLfOqvgsXBkp8qj9eInEPW9gInR/ZMfn1yrhIFOY9ufG6W\nJNHndAepE44Evcf+kAAbMUppfb7aAdobKVunE6dyLdrg1tkjWeRe8sdB3hBe\n8U/fLwnReoS9Vdl67JdRNNkW0L/A5lokkxXBnOHlNumabEWcS8cXg91yXgMZ\nMK0WVSAmziDoksv+uDQzI9XA6VxwGqe17sgkXczxXf61733WaWZvYKV2KXFK\nS2+4tp1K3He6KKlQColyyLLLDva3i6pqmRKL/4mZK3ucJz60cmPiZS2BKg9w\ntYCKYW7J0PrCcc7QHTU0LWyBWYL2W9FXtC3Y2nCveinLomV4piWn3C2IqWh2\nM/Bz6CvGLkS2mfXW+08KNZiZRF/0gZbO/87addXNEjysyUYpRDaqa80cmG3I\nEkmtN5uJK1/CgP0FK2w+FYucap8MqL86Zwgcm/O4A5gMt4VMHMbFhfYgrCuF\nfDixfzeC/l8QR1NdOyNIo5TZnqXTfDaTYYvW8PVLATmivYmBxJWtGbigPF0a\nJFX3\r\n=SMkC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMxec2j5lTC5925k0Z11Ee9m2tQg4rJ8CGxgWZW5a9sAIhAPAkNsd8dtxXoxf08zYtw2uBeFGPl8qRnIKJNgaxL7ax"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.c4dd9684.0_1592925294980_0.2692731280610585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.b3e53981.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/top-app-bar":"=8.0.0-canary.15e81fe98.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.15e81fe98.0","@material/theme":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4jPi/KkUU6YW2qhk09muvcIblNccaCcRJREuHkkoPEeRyb1W1cfVyHZJzc5dyvuEefMDhsRLTRH9pp68GO2yzA==","shasum":"4a6a043b8bcf076ede551604d2f65cb6dd66b15b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.b3e53981.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCmCRA9TVsSAnZWagAADMsQAIqvXkdyCkCqASQjPk28\nXm053xgPAc/p1r3DxxqNgvarOon4mg6NUTJW8B+CntCZGEWNy1vf2pnQ376M\noaWiLOVb4TejNcilm+3Rjw63ZOUEXZCMWMui/Ny5bibofGCEd7rDXQ2eRMDJ\ndUl8sCX2pEJFAbwM+Ll6OA3m5sVTsRq6l7a1voBeMx/bFY3CeaLIlqgA/KU2\nKL5pKfZkvpUP8hLs2BUOpIVVqeYxn19b4SIO+mQ1rW+AQBjWKk3y7w+c1M3S\nshMqu9ofDvuA2408waZEaIrkxgXCvWlA/YSNA3SJfiUmw6oJYoLFbiMlVHO6\n6z/8NOLcnU+hNABa6KBkdmGRhD12Kik84CEV9VcmbVzFCHbOyeeIrADb9f8d\nbYO8T1PIhfkARZhjVQ9qRhTQgtJbQo0SLfcThdzNi7apiNzTIS+b1C8lgkgV\nyf5/m9XskuHEg+gYBhCMGro/YLALsTae0ZJ/RZKDlcDtue5DlbOzfFd6qbgH\ns1tY980SK/2CX4QoFlIh+C67z4OIxEz7XVBK1EnOOyX0saP65UndT0p0IxlC\nf52eKhaFDVVSypCn0ddahyl56PNhvxaa8We/+dMIUBwEasgFwpkUiy9dGjg6\nYe14eiWOmtlTQHtx2wzsy7gn0w/EiPY6zHwZdXh1sbo2HrUE8tCUIZKYBRh7\n1h2J\r\n=Uf0d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCW/O+V3hMxzmUx8eLhYue29pcE+5RB8WAdrUPsi5XnkgIhAIdms9Gj5/mbdB5lltwmy/lFvCoz7qxWCq4v1xSaQYk+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.b3e53981.0_1592959142105_0.6045375058541924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.b9468f77.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/top-app-bar":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FyzFwCTzHYVOCglnranXSRgkQDuA3B9hMiH+2VE2ljXk/QuFaeZx83Iq7IVKDGmzPpAPxld4KXRB8aKBR8iMAA==","shasum":"9e23f2162f7938c9fd224b603c31ee1ac41e021c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.b9468f77.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88uICRA9TVsSAnZWagAAtT8P/ivv/xBqHyvs55O0uAEi\nPvaXKgT2XZl87kdP75hs3JdUhIlkaVT4NSwt8avUAiylSY8swMoacJWf78+e\nXoVq+al5bWdqnitaT620netF2l1C2B0Qm579NfXgDi7njD/Q+IdriYmaAKQu\nZiRDCfMlBacRlsHZHZmAQEfqGJ6EK/tSTbiEzMMQk7sR66vxrOQvujTlexJ3\nJ5eWR1rjF2mmRQSeZCVAoj90/drZ/fPQjtK9SrKELWCZS8JWuiDONMktw1pr\nfIQXJj0/zF7dBaibDkJR6O3ugjeh2h9G92CAVwVJjxFskjL/bbDizINgkeOq\nIdTYUJP0A8b08xMahM//a2+d+HzLGUX6PPj9jdn5niQzmgyhm2ExpPRPBEMw\nxiuVPW9872eUlJlU3oz658YqEf5WnoBNgAg22KQObU2XYPvtxocqUboU1utF\n41XzSdUXYPkQtECJlapfaKkzjhu/t/UV5G4AztI8/vdHkMJhOWhwwT7bIYI4\nwCxq5pM5pt6BRm8M+O3U7XA0l/jVGRgSG17lLjOa+zOuzdiHFr5eKxs3MJ+e\nXoa/p6FvXs7eoLdAC/CPMmIRhwk30z3Mk5dkaMEgi0M9036d9otCZxi69r69\nk44XB0hktEj/fxkp7GLJCYOhPZ7MdqTn0B1VpKt0vchVwnU57k8Mj2+ZxS7T\nFbtO\r\n=ch2/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRWRcTX0fIePGsk3ghH242Uqw1boeBBTgiQKOMBR8sOQIhAPkeyb3ASBVEI32w3Be9Hex1bYvIroE3HccoQqrwjJAA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.b9468f77.0_1593035655708_0.3425099041135782"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.eb790e49.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/top-app-bar":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+RuawyiibHw32npW7gEjiQsa74IW92FFKIevLPI4jrSNp62OxITH4OCx66rsYc/oBZUAnx/LQf6MdVh7P7GmmQ==","shasum":"9c8b6d11539f59115c01cd272e4da731c4b39d12","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.eb790e49.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RS5CRA9TVsSAnZWagAAQTsQAIQkp0qgyi/i0CwaCdoH\nG/DEVAWO5H9J4BCLUs3WBe8QdmluN5DovmKhpj3QRbFiRaUn7vH34zyU/T7D\ng+AfNJXqvvTwN9AV1CoJ7ydytx///1wMWVgVeHOxDGwVpNwm8isukTOXIxZx\nOc++3biUPzuqjPFoa6lfrznyj7Jg2bq0TuqlLzieQwgQgKLj68hIo7CHhL09\nIKT6q+vQVIj6ZZt3jqZX8I+OzVvRWBbebpE+/e957z6UsLNoiMkJpanjfpSc\nclDqBG1lLEa7jG/Pd0npCqnGNtPtHHOVpYZcgXUTgdYAP5Qkl8oN7SVVaTFg\nZL26k2OyxYp1GD2l+DC61Sv9tTL5fCRTkcpwEF/H6cxpjtwn45LVEu1RBL6Q\n6mdPKBexIjxF1EYbte2THyYWVWRzMx7scmoSDU+FiD/sS0uEVk6k2wNspGPf\nBwP42gF1hvcVnmtOL3KdISZQ6XymxaCmUkzK5rT0JFoNgr3JoMyXW1DDNhlH\ncoHMprrlT8qlnUGozxwSJ7NktlquAa6V/1JCYjia1zViCaFz8RRKI8Kk48FL\nctqc+X65B0w/9ZD+TauJx5+gp7dnmYmFXyOApY6FYLFy2fHQxVBBptq3FDaL\nOUIV6RsViUNXyi64zCpUof3SiHx5VlvkzbLWzwIlz42HXrkR4CReXhJ7B/Ll\nr2sB\r\n=n6GE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ6wR9XiL/QT1XQG6C5Cib1ZRmQG1gpyTL9DCuYjhoSwIhAPKdrjC4NAJU70AzudQsNjD0d55L60QoDd/0mVX9UAyW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.eb790e49.0_1593119929196_0.20343329572616398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/top-app-bar":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Pbm4kcaYleGlL8PP0yC6sOh/rVfezbBiaBiOMl7xCfybK4suvv6vmCqjunCZiPjOtFkTdIAx/0D1j16uR06RDg==","shasum":"19c570412869e7fa8a70fbf43ff7b04a1facbe1e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irECRA9TVsSAnZWagAA2IkP/1Bl1NulfGTd0SFnWUDA\nuNMwqg5a9Qoy7r5NkLydn5F8Vrw4DCkjs/3CLPR6MjhiRW46mmB8JWF9gZO8\na5zkGHauTdYoFm3gD0XAJw8pMhmn8+NMyzelcjvgck5ECTI4vfrUh9RUVrMA\nTCfjVe3LcP0FRzvaaWS67I0ZggqQO3LA6NYu5elbxO1nIOnJFT7yKW0XMvqs\nfWhxPDdBTVnxisdCK+zpGpIBAHK7bbyp1//PQPLuLbZDgclVWavpOPBOArs+\nrohUpfgOe2vydXYc9bXdbf2ucyByzVVZolxd5m5/KrBzq3dsChkKLlfKrpkj\nZ8+QjofZx6LyC8qNWDD3X34/mjn1YVB0OzTgdHepRN8c/Zftn9t2RoXt7SL8\n9F8o/feUBfRL4ZT01lDzGufKU5nwcC0JtzLBiJ5kShAvLjtwzkHDNeRVZEJP\nXovWm1qOz2ijiWHHIuDlaCbCMemp9w1pGFmxniy9kr8JVBS4BPh9YFJbkm0R\n0qRKIp4oIa56vISh3KVHAhxKARvNjzUIb1CvQMX6qL+MqlduXLom4eZXn4KW\nvSrucsIbMwKVTFumxKWttISO2kmUQhjF2F+PQUU/0D60+pRVG6QZiWT8Yc6v\nA7onm8op5oKt1EtsMd1GSEsiCignpV88OvakfkhKp6tdQOQ1H0pRjfewi3nn\nmybJ\r\n=IUHS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHp26ceknAZwjzzB+PPJuvg6kV8+BBn6e8oIbJRzacDgIhAIFvqLQSBIng+veF80wiAt4vFf4g1xtm/dVPMB0bSO1M"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.9aa1a5c5.0_1593191107610_0.4658555913666669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.d36e9861.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/top-app-bar":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Xax8ieT9VHjAmUNtv6+8na5914qASQ/HS+yExo4XIcQxuR9oBK/3W14LRgqYTpVgBKi0vmRSUJRl7nyOP/xgdA==","shasum":"ac83bd407746b69ad6b9237627e3691e7c30767c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.d36e9861.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIQCRA9TVsSAnZWagAAr90P/jlEHu6TpJbd7vD4Qu6Z\nJXRVBY1D6xHM6ApId8TZKDsKGaTvAIlB3YzJzIH7d2XQqIjmxpTfMs2Ub6Wo\n8DS6EwEOJz05qacvUSHx5iJASu8u+Q1jEky+/srQOaRAYHJ9wqIZWiD4etcJ\nhH/CB0pilnBVmGbosM3h/oKFx1YLwY0IP8wwKH7nn0Q4KOfsDeEbwSskuufV\n3C/NF35fEwyFM1+SbkIB8D44X/izbl20Qz4LiCJhr+vXcBIDlvBBVY2vs6Rw\nfSbj0eaA5mzoOzIKif3GBWyLTUflfWDKuC5cjd9T8MgfXXoFvaYcmnFrxJPk\nMShGP9Exsl/eCFx4lN7s227tioC93ialt4hfFqyY+0lexaVCUv1ISsyHtNrX\ntJA+bUToJu7W4SRdMmvLVWGgOCkNkF+YTkPEcX+VQMnG4GDFyuwDvy7lwrFD\n7PQA7oO1q/qup2NxUlhYBmaW7yY94UHZV1WP1uzmc2GT4HmpcY1b36bjJqLx\nIYSi7CJ0A+NvEuF5dP8m8uYjHL27q1Vmgw5iVFuinzwDJGfPCxZt3OCuiCx1\nVrG4uAHSjb1Mz4XZSLtrL2yBA/2ANWm+LvOOEG0hmba2w/435lNJyP02QB2Q\nIjf1jU59Uvqi60xegWvPUwKF9bvc5CJPJzLdz0m9yK2WNMLChq6zMCg5cMB6\nT2Kk\r\n=QDWY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpC8tB77ND2GcQKs9QRPydIVo96jrk+mIpUgmWTCp+OgIgZnvHfDNgbVk/bsKZSKScLIFnkBtPO9FPGMOfmQlC0E4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.d36e9861.0_1593192976095_0.12277862441107823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.155c2f85.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/top-app-bar":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-k8Z9VFJz6H4NJRHinKrEaw/TYmulht/bc5dSTi0oWwieoUA5/vDT7d4VEYQoEWqLuy2i5bxGIH4lPOTwRI5Rqw==","shasum":"9f738f6aa1cb63202e860cb56c587899d5bc641c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.155c2f85.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oTaCRA9TVsSAnZWagAAy4kP/36VL9B5cXAARg3d+awV\nnYT65/jkAGAQfG+XHnh3Kgx37DnXFjay8wZT9TRLerT1aMeVqba6XkKPZ1HP\nPovQUDsn2yg5CbgZaXKOtHz4HSrAKuEm8r/RY0n0J94UxbRMKCo0hbpHKbpX\n+3QAPBZZpgopanpeIBi7bN9N9gagJFZ5zNiRGwHe0QqRbhKfaHjpjaVqvyuy\nyrwP7DsxEJ7BuJrMGnaAVym3pRfSoIDQBllYA0+VZGOTtvQTrFTyZYG+g3PX\nKm4l9SxJ+Em30/qkO2d7lw/KOYn1xhmu0UCThE7QZgtRkNDxiZI9dW+WvqLg\nFK+3MKIQm0UW5deastlTP0VN6YBAL+AAbeWV30O3/Ok61kwC93E7GEo50NE8\ndwmt1CUXyr1aUUWzeelbT6iFG3LZnXd+kq1H6Gh6KHT4xAdNh7NKjoYiH6Ad\nF0tp6f03zwHKnnE6OYEyVdiWSpNmsq1vpH7RjebjWX6sADAgAuaEQRSc0+md\n7Yy0s3q19XDzkof5UytDCSeNBpB8FRDaOkEo0D7fFUCIoMyjcBrFuQ9aKa2V\nWnBWIuWNbatlCTjGxZNe8356qn5eZk5sO7uIqYhi3BDcfJCOQBoq8uA2/RRI\nW/BdBaA1mrQefYn5PNBcb0H2aaRYdvnHRnMgVXAEruEkSeA4Yljf3m68P8NN\n2p3T\r\n=onX0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUopLOpepBWIAn/DqZWc9hF33F5ijYkXu3VDaHrxjT9QIgMU/hmhpR6hCmwYAArEbqUqoHhUapNMGFqfB/JxZWZPE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.155c2f85.0_1593214169261_0.22924806185988955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.340c9c40.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/top-app-bar":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kqIsZ4yXDV3G1qoGluZKr7/S9Fokxa57E3X5cM54h4z1kNopUJ5Vm92lUoOpZ8qWY2W5WaTI2Yq+uU02ZP8Rhw==","shasum":"e1832c8959d24e883cfca49ed164b952a1761e85","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.340c9c40.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9objCRA9TVsSAnZWagAADpUP/RlcqIznpbWnr52hVXoa\no5uxsZ4ov9fuqIMWICDoM+jLlNNjZGnV9MPMmlcwW6CPsqvFDFkopqpRYjiV\nINuWYe5b2jxof9CXoQ2G0D3niWi97DE6V8T6G0xdn3+oVOlW0zP/jpMsHJOT\nKNKIxYHZqFDdMCQIO75T51olO1GBzC4nHjBrw43ZLfRDteuewVFMJQyuwIUF\nV/9Qid1osLlUYsGhGW7FNYvzYqEU6fpqvYI7aoF/g9xydOTrSXydPXgCqkSc\nZmf7ZbVBOYrkrNLIZHciBwsm+1KHROg+pzDsKQjDcGlt0x68Ka9nzDl3plVn\nIma4sS69lOj4ENDu2kMd12hzB/IOG5DrDlJdxFJ5Se4TXa7GGg9sPA8vURmT\nI3Ngg1HnPNoCH1RkX2FuDCoE4YFJdSkEy9H0N1dRIm1bIckBMWygkqgELDcR\nWh72Jg4bayHpOU1gdmcpcSLOYTRx9vOJ5CVgRnKvEwnqJKnYdNabT7La0Xlc\nt0UKPlamIjcyajc+WYTby3BuOrjTUGMGVEKGeT+CijfhyjsQKZy3PcxaRcIq\nV+QNbyK6+HP6tg186KQWBTRtgSNP1ZPWN3PfWNqqNIjPBRKKfNcpdkW7cSvg\nYo3sz+8v9qiHxYRwzsRZcgzgyFojPaB6CHiI980RbUvrgyppOugwm1+4/je3\nlNRb\r\n=L5lC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAckDeYb3MQ8Wt9X2OcFLa73nSyYbp7tKFwlk83hO0QlAiEAlMsNSrNuPoW50tc42Q2ipt27ccJH8/Uo3YwBNNZu858="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.340c9c40.0_1593214691253_0.45965026207193027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-top-app-bar","version":"0.16.0-canary.a3384d2d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/top-app-bar":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zvBz2o31k0FViz6jljGiB29p9gS43rJvEBZ1jjgltlk67LrgSd39va2pyLu2fq0/wcKTQCxMQONu2lTH+f0GQQ==","shasum":"079a7b22f3c43605a5f249a0862cf617c6c71f89","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.0-canary.a3384d2d.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6fiCRA9TVsSAnZWagAAFiUP/2ogScXxRDQbNcxHP3Gi\nUDtolMtosjsqhXIMTCHN6OFUWnQrChUvVKUuLTMkZNA0CRLZ5DqKQOMtleRr\nVXlSMpG0XtOFemAcr9a+dC79qLGN6MxNaBH/WRV5/85212Vkj4+Dy5BHCvcf\ngBCJH2Mm4DwyTpmu8JTH3z/MwcqlpAyXObCMy3fcQRKVwAvV5ZPqP0T1rXI5\nhau4mu4u7DDzdHO/rk9cqOaWYwwocNhzfRGxCak4QGKxbKGrE9oM1gnX1ZB1\nJU0BQoiwBJDxpTonmYjvwr6hBncEi2LMfK8uE73RITRId5gtN0N+Fe7OqvRY\nMX5+YfxXe0l85+XTGSt61dww8t8tWY1JzkXFqSAduhMbhZJXVCt1GSIiyfcR\nhM9iv2ruBE86Ow3vd+0C8nbkDOA7tyM19XT5E5/abIBVZAVAPiG62N6iOF9S\ne7mEdnbuFRW0bLPCp770j/fdHH3MMaWD3c2MX/ik+csnKvhhNNgR/YCH36WQ\nhlb8kIz58fJ4yFic/qW18lQXeJ63+zlwg/TtJTxEe0l5aykc1oLw4akTTklb\nMs7YPA50tnWw/PijjTPOXQD1mOCpiyNOvHGQq0mI8xvg49fwy1R8Csv9t0AV\n4Cw9hb4ZSJgLp0dB02ve92v/4zt4Md6W0jP3Llf/gBbv8noU+i1po7H6t11t\nAbNZ\r\n=sz5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPPPNyrkXWbXSyW5UF0x8m0bvRzyicKYByemqUCII5QAiEA228rMl9nAo9DdMiz3OEQJNo6cNYi32Wu4os5BBB5AUM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.0-canary.a3384d2d.0_1593550818379_0.49289847121872365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-top-app-bar","version":"0.17.0-canary.6d056c96.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/top-app-bar":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DYAU09DHozxIxwMJBAnbVKzz5wIDAHTFnHCyInIN48kuSN8BWbnjYN/nixgl1exWkT689Ubt+5u7lOGvlBB4MQ==","shasum":"c6b23ebcce4a0b63cc2024f4e31bc907255d3e42","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.17.0-canary.6d056c96.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oWCRA9TVsSAnZWagAAEqQQAJN65Vf+EIUzj8sxh/sH\ntBY1X55UhAsIm2SQU6TEHH9e9YGlHzIbcT42kfIWpwl3XMze9nmozV6RRUnw\nKBOAtA6VWXJSaKVOSc3N0cl80X0ytctHhP6lbFYmRMVwpfLLE1qE3gSsXTTh\n1VBNPrikBh3i4UPuPaH76Oh1XM2CUZhmaZ58tNzRE5KcNAu1YicvHg9Iijje\nC0N33C4FYRwvkObs6lgOSnlO1yG24Tpa3e+JJFbgYWjNoX1n4MH7zYo+s6Qn\nfMTL8oAvJ5E1XoyvH7fAH/OTePzzTWmLgRzlLIX56v7npLluG18J8FxZ8tvG\nJpowNCbIlo9zWpoIRi+RoxdTOfV85mhsVS1zhb9pHEZAU3Q6p7gREA+Ip/Y3\nAcPSnYcxCi4kiXp4Eh0uJ3hxhhyWedosfxJWpIx1/Fxym/dm5xvHupBl5eoI\nxCyKGry5gYDaoy+AxVeMVb9uiYi50FvRirLmSn52V+wC/QmvaQPqW1DBAtAy\nR5Sd9kBnZQrPCwR/b9Tki8FqPYt0KthRDOlxjZU6wZqF+voqRuGjxkJvyJtv\nbpZfPZb1xGWZ81+9IXrIlK8bjDEGym7esdyrxwAmkJkuWv5BWf7P8pqdZv0z\nQMR3p2KuBW9TOV/l+QbPfRx6IfG6iJIggHXJD/Ng9hSdedqt/RbjMQ34nxTF\nD0bU\r\n=p7Bt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE1VeM6A6QG5ttkFtEUQoDTr1OHoKiEI2T84GhVAe7+KAiEA0CSG+0rSJJCBoT8SvGYqypsf5qYHLZmWK+JZ7sX+MNA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.17.0-canary.6d056c96.0_1593551382254_0.8375761927236145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-top-app-bar","version":"0.16.1","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.16.1","@material/top-app-bar":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.c678a9d34.0","@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-top-app-bar@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-u/jkD4e/hYELN2HzG1ztmCZfCT/Q73G1QCQ7MIFspJTVaGQ5PI0dBoFwxbIZOtFMo8H42J4j+EKUPiXkEg9WsA==","shasum":"3cf24310e92a672066814e830579cca54a778256","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.16.1.tgz","fileCount":20,"unpackedSize":82579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tICRA9TVsSAnZWagAAFckP/3SfyWCQ9JF0loqnbyiU\n2InCEb9duor+Szhu+cTZH2xNbR0S3Fz0eB0uZ4cyUVbT+8ARSHvHxXJ2YP3W\naFSmRtkAQA7CtnqXFYa/XNINCTiOhjDrO8+8NHqruxg+S5kBCXHelgShSUjU\nw/6gWNyPg7hUa/qeEe6csLJgAWGQxeNtNExxU4S8Sk4GPGLsR0FLw8JbHVOT\nP9n2hlmVuWQDcpa4HunApu/9d5H4D4cFNMV/h3kizTaj7upwaYUcasZNSNjM\nQdTljmjcKO7SLwOsZEP+NctTeDkBfHOksDYFXkbVnOoUeEMful469WXfzdRz\nuKTK9B8iN5lWFlTJCvh3Hl/CWlP/ByQnSZ/xssvf6xO7k00E/v3qc1kF4q6F\nuPpCxifuyKiE6RBmsqW/uWgiKH6OqorWlhwIeRlxxW8pp6NRXy1FxZAfZZ6U\n6UCX59UWedXvl09RDhhUvGW5k/a6KLe62Q5dkNdASMp8SjmogXxsheLhE0oc\nVdA4Vabz2MS7YhTUmI/d2hdr16JCfo+tdhmnbSj9B2rEagIWvqL1JiHFYJqK\npta7IFVs5+G0OGZbzWO56pyGkNXLSsyWVu+7DHTNY2J8cwbqOu2nyhcOEsM3\nWU2uB6MJglJcHHl6qv3Cw2098CEL7D5eEhyII+KjuYjmFY6PNLBLq8FQOxO2\nbQ3m\r\n=xrWL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDA1jGiNrespaA0nVQNJGXU8MktIW1S5jdsb/NRIUQ33AiA7I2nCgeYmBxRXiV7WZXKNRyUGZ76rZoFiZLnNv3n9xg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.16.1_1593551688242_0.42855777167804043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-top-app-bar","version":"0.17.0-canary.f7e37607.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/top-app-bar":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UkvzYa9q+vMT310duL8XgY77PZ104i1as72PWyXEqsXtvqlykyzkcP3kfsjPf7PSoO6NjaifgHOa8ILIJIuzmg==","shasum":"577a2283198dc79225b28638cca91eecb94b7fda","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.17.0-canary.f7e37607.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IlCRA9TVsSAnZWagAAKY0P/iVyqq4sdzElDN4uKrc8\n5LW7ugbnzH/EmLpUBZGuf6h8zD3GsOlgaaquaUMDp3TK8mxNvcTB4Pl3IyXT\n1S83mOOoTOadoIezpxiD/eMhSCcK8Ol4s52CQv/E3vICTRg7XJQgfpeEvgT3\n1gDYiULH1hm17DzQ8aN7J6VsHl2gKuyVudop+22ikWzPNgvL7bW8vcckGjmt\nBcMGUbhSkvtJBSK3+Xgg92GmQRxkdAAutUq5Q9IUJeEAKQb9R9X1Ylq9+zpo\n0Lgjk7IJ/vvQZLgrM1zpUvreA18yaSnMdXBLvJjPR8hum2QhbChlsH8jAomx\nIe6rEAwfoPChEthB18ZWxamsUp8goKyS2sLm6GbwfzM157bE2rrPyHlnHNu1\nF2q8G1AiJu7lkaur+sucLwn7AL+J9ddnmubQV1PFgydtzLYNswub6FR6YIfG\nz9y+qC5MQIVhwtepoSmDQU4tYw4Ip9JxU7mmHEk87+BL5TfEDPG2uJNvs13U\nRESxKr4x4/LjUSjPZ4VYe0N5BUD0Zf3F2ORsyWg2SjcFh61FC0ImvuNT8wq0\nZAWqvW7hDR/4FMZ5Ix1s9nOgm6AtAe5u2Eas6I81lHEmdI43QAH0O5V5sB+c\noC+TQ4SQAcWKlEGcNp5M/Zkcyz+oE/EugCa12PhwBsWFyVizk3zOkkW22gPo\nW7EB\r\n=WKAg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDpgqhyxHeclbhxQTlnCjUPPptjZxDHg2h8Y3cHsSwl9AiBAPS/JS+NbDG6iNgP3GfEjzmY2vJYUltF/e2HsBeK4nQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.17.0-canary.f7e37607.0_1593553445306_0.04770654399320273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.0afbfef2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/top-app-bar":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.610c26c4a.0","@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tOp9QT9mvjBoKg2633zjUvYXP0cjcK0ohFWwZkpRQuw/q0M3xJs1j+gYVFRCeN+ZVcGe7u7W9KEWF4qB83hfQg==","shasum":"c9ed1d3c244a5d24ad7324077bc704dae9f5d360","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.0afbfef2.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeICRA9TVsSAnZWagAAnqIQAJfyNqCSbQP7vW8MEVWR\nZFx2YHOiYvX0JWkyf1utjKVAuREfUtLkjCWq3LCbGl3E/TFufo8N6n5vLe2w\n25iWCu9GQgMIo01jiJqJOFR1IqfezqunRhS0MjPEfCgzGEtz/3woOYepcQbe\nBDLSsOaWSX3ZZbVeLMDuR0eYlugcyNDqJo9Yew04uHknqiakdhBEVB/xhjzf\nHGaCvDByGuOA2QjDh1ilK1x5qbc7FPjPz6k3p2yRq3ceEmNhxnor8uA9lybl\nbCVuuisq5tAgcudLHO37sShedZFd49nDLsYfioFYKaKIs5a2/cPpjMVimp4/\nuPE8ditfiMcQJvcjIxCRXA5FrHB42curg+WzeCBzsLBdg+N14t8jyV8HRJGO\nKGzzG095QR/sRApzH+/ss2PZ5UL3i5uQDtFFwv9tYNW5yLHDocfHl3F0geEH\nW36+aOJR9+uLCX9e2PU1D0Z42QBrjjl5pFpHbQa/ZiQRbr1JajOvvHIgXNJo\n9Svukeu5gJCFO0k+U0sQpnvAxWWbEHdTTryjljtrQNO9Q++Th7EtOaoqlPZ1\nLUJ6tUj1uFLhoAmkhY5I89Kj/EcwJKabyjpTyh6Sr3We0+JUUwXBGulQXExI\n6XnjLynT4Z0cW5Pc96Yf6hZuEmiYpBP1KQ6mSxck+Kpjk9fTVo08L5l0HEHY\nsZHn\r\n=7pz1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALc2rnEHg6f0UZGQ5Ob6093BEQHrRS6091nIQgGmrR/AiEAzSjS1AVRdSm0Sqzv9qfqFzHC4WG3u+MaBfTi3eQeWKg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.0afbfef2.0_1593632647953_0.27851634574509054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-top-app-bar","version":"0.17.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.0","@material/top-app-bar":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.610c26c4a.0","@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-top-app-bar@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-1qixot8CJzX/Ij61ZSDwOKx6HRI/zx8alTMrtbGLqNz15Y0CK7P0H7+lVPGB9D0uXbHxG+KnZWMxOxV0YI+thA==","shasum":"7ea5f7635ff73b66cd10dc59b4d28681c493cb9f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.17.0.tgz","fileCount":20,"unpackedSize":82579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OedCRA9TVsSAnZWagAAQDUQAIDDM+PSeHQHnSngcVvC\n5S291IV+B1y353Dq5cfKhqYMjSESVGpnMPGgKq/9Iofc0LRwttRjKOG5fYwj\nwYO4rWVr4gcprHQgLB2bDhV1SN4OnZ23DAbNe+ALE+4oX39wITNIGW3KbXM4\n0CtI7uqTOgf9v782vrZ33/Fy/0EDhraY4b2UMB8KYhhADSxSkNkcZx5e27JW\nUuoHr5NUbMmltPIErwbqroNbRURRiC5FScdn6FVpjUKth88dZ4SraA79pZ3y\nbL96zrKOnFLdFBHFbmlVuZVVo13+c8NkFOci88Dy2y2bR6u38bVb2cWussZn\nr7dbESAQFYEe/+YHBxMM1GoRq9Ab/MTogM1J5O2zYSaGoXsYGCY4CNZppwTU\nXZySGUsY66t6hFSVsXUCrmXEx1EXr/gysd5eWtKBQeWW4gmkwcK3QuCl8FRO\n43nNolaDbOuOy5NAx87uAlOtpA9AEp1EyL+APBi25dgmeIru/bMWccypY+cj\nIkPbkEfkE/KQVibHF/cWT8s7GjDrNuCK/heYUs34Jo+ZWHqb9Y0fHI+Uy472\nd6tcHK9yvOIsK+HVxOZgr1Zwop+jJvyVNNw9zt4SsEqklDioxrU/hkIOziF+\ncW1QmuOM4Ix8Vkf6wh6QGsBXXEg62KMvpd971XJVSWVAlkWpmlcrHCJJxHL+\nWVc4\r\n=1/aa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtr+0kDjax+2ZdJtjQG9UjJM1Q2R2dqGmawmjCGVf/tAiEA4mjpDfWewfe1xprNJVTqn50B2oSrgFsg4fuGAyJjiQg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.17.0_1593632669479_0.2858989862793915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.fd970958.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd970958.0","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-G5Kb4w102E5jF0mNf1sG+djLzFeZPLSS++cxS9oq/dGO1saqJ/kQL2KA8RXRYTWPRSCYNFNYUhDlUmvyv1jY+g==","shasum":"fcefde737a4c946e7b7e00ddce26a40365548441","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.fd970958.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1ACRA9TVsSAnZWagAAmx8P/iifXMEYh/6xe8aopN2u\nUAoFqQB9gJxhiq3w/iEZfCnT2D0XlsZEj0e3fcTTBS9UQ+lLq0eO6sFXmXDp\nKvbOKiiaf7stHkZWq1FvpTNTniRQFRoMVk76PU+OTxUhipXo7dd8cv3yAewm\nocyMVXtskXfGSD9n+Xpeel6cXa4Y57OxC/MSYKVkb24y7Iy9XC0ywswO/IsG\n8y2W6oRa3zUjrMtN8khv28PAeWLSru5PfkkhhsqAF4KTGR9Idcf1/ETrYi88\nIf4ujrUMZdHteRcECcQOZimovvuzMdG/4TYMEG6re45HuYSODbIzKourY2iX\n3/jhhrpr957FL/29wYbZpKK+dnxZAcGdFGDrLsonbSblAsqJSsvOWFmiatiO\niaP6TE9RxxBAOu98b0E4FB4hPsOtdof1W2o830juvsLvbSLIwfCAj2sC7V/s\nb4VteRGKP5nbpBjJKzuSsWhWt8YxQTPwcH7TYVh6kfDVIAW3ZWQb2k9nxItZ\n3RGPAqqQ31gIogcvVTuBq4xthOGeEirFIsV6RvBL8ZFXGKQr8oB/DG5C99nU\nAeL5v8Ljj8my5DI8ar/Rs5zpXf1u2aok85ouowR3to4k6GUXpwvZPZ+Q/bU0\nNbBLHQ9TqHfvhrZg148iJysbFN3B/BEEDXOz4+rp8qVCSMVRW/OYH5MJ14Aq\no65y\r\n=8rs6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYZlygR/Fp6YXYqm9ZflxoJyC+JJS015zNU45nRDUiNgIhAJEdxDI7QI8Jg4pLqn/P/C+AobWnYLpnPM7gmPsmNaKj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.fd970958.0_1593646400395_0.9772855214116611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.fd44be19.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ERQayAkgzRVGP0lh9LnOcjkl66jodNEtiNJmKiUkWYJozudFPHpqCAO7iNTGK8jS+/oUpbFE6K1YkEM4SbBryQ==","shasum":"81039bb1e91bc5112351b6fa8f7f9083bc1bff8a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.fd44be19.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUrCRA9TVsSAnZWagAA8b0P/3kKD2R8VvHTTXy+Y1Ur\n1gNyi9eOeJZY1COYjvbGP5Rjbb7MypT6cdbPgVwYSQFwN9sjSOAsmSek+8Qu\nlCPcO7b8Vnx2V7NTZv+NGt6VUFbdVCRCYJFDpqd0z6zL2tIetMCdF3Vr+ciL\nAxIkhZNPkBOwalN8fQdh133RIaFKWLq3dPgUdAV0+9RCVrJCvsxFpODNlnB6\nbBj58R2/hIKRxzIAFwC70bwvQvpaNYX/b80o2H441+hzRFtMYDzuXV5sJAGb\nGLlLVDqTXJq9Cu+Wg3iWh0ofmsfEeMklQ34KPtkoGq4lWVeyEr9xrQPD1qJR\nfs1FaVbv0FxMHP8Yk2/GNKw387k5aO8NyILohxdNqpgT7u7eM4A8veVNqEYX\nRQTJhpuFTCrzyfd77+ueNSw43UhIh078RcGZlpwgBc5f4MGrHo66CKNZKkvd\nTcwmmS36+EZ0jEcgF6/Z4KcTPAYTXUKo1kHPuWH9nfMBkdcLb9elsR2ChazB\nL0yRrsldfYq2cJPZmxSrUZeCoazOojzRwdY82ULDi66dXZk1Ongz5qb1gc6h\n8b5hJgdzeiupZRDkn+1cg1UOkLSif07tUif9onFOw0+KZUTfy9YcyzKZ/+ZD\nmVSY+QEwXydb1TbJGg51ByeGUkImOr3Py6mUlC9eMa5XQMCUjyWIQ9Vw4VJz\n4On/\r\n=CdCa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmTiWzfSpC+EOhIfJ2j7UxkYQKp4Q60bLNhwdkyoE7eQIgDczZBNHVehkzsdiLpYpP7nOx9F7/vR2Fkul9o9lM1Ic="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.fd44be19.0_1593668907026_0.6946970406338555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-top-app-bar","version":"0.17.2","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.2","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a78ceb112.0","@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-top-app-bar@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-J8Jw9Kvb0XXM48qCCSRnlLW2ImJTk+pqV+3+gj6rOXtDqH62PBWy+mQWvjRSf34dlsRwUOuOOuNGWYJo2Ci33g==","shasum":"9f591d53f84a53573c32149ab62fe2d3467d69ba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.17.2.tgz","fileCount":20,"unpackedSize":82579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Xd6CRA9TVsSAnZWagAAgJsP/A49BtTZOvHNccxqkrKE\nRs0WsVkEoTkklYYtZXe4FVUnySCQgz3sJIItvEOc17UQYtvIlao92NW+0rgl\nSb5qPCzb+4OZn22WgReRHL1qSDlhsah1P+9HunqP0gvRurddErzzkUq0mcnu\nkVLoqAwLEG2Iw5WM17YIUGDKSvW0/ySZ20iNUwS4jHtfUMdLH4bE6Kmr6yIO\nwjz6RilDVEOW9/aPlfKK/FP7egfr6jntIDD/gaeqfwm3yAScjdBxM7s0zeEn\nqS/MG71ys4QSGC+3CfR/VJp2QxRCXCeRn4liCU4FvfYkDIQZwJIZldhrJMq5\nWFqsHyQ/IPf59lXEuYDZCgNgF7hbR30N86YHYSG9ujwYIgDwq/cl+QHwgPgG\nd/hQ7iKSEk+03PWVDjZiVKl/EXF7msFGscXXUdQNDT4T+xydoBwqB2yH7Txy\nyAJ9kwLMv6u4l+yMRAHomhETOPfwRl+8fJJ4GkpLXSIphedG1ja/dBrZcF6W\nujH35AhssfM3KjSGeXGA0S5SoFurJXp23OTs/To9WTBE62kdJu635P9Mez2M\ntHW5tfjURsw7P9tr/bCs/Qz8vmEyi+G8SEg/aXWaWtS91CwCbaz6Lhb/Qer5\nleerFnAsU573mPLyBLFsajhlgVTc6jNwCGXi0bOxx6EFzoLaU8bGsInEqPWW\nmcgm\r\n=Rfjn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbM7ieWCzgmv4wUAKp1vn0vwPY+G56Uw3OCZaXYkdY4AIhANCDv67bVUhCFCFBoM+ksDAJ4/WFc8spejqMu1lvwODw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.17.2_1593669498148_0.7787525685456078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GJHGlB8sHeXCXlF+HzyF//mch9kPKPzP8dI8ciID/IqBGiuDPy4tAXsD28EIuC0znHtjrW7+WIhpV9fvyzVdRQ==","shasum":"11024d74d043c5ad566588ad97d228d2e907935d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.ca6fc6de.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Xe0CRA9TVsSAnZWagAABAYQAIEyYE1SGgz0j0c0sTB8\nxo+J1816mwkP3+fZm+b6VnRUpUXtVgKJ/gdLN4d+PFuYwQKsY5ILfa14uzt0\nmPSch/Qqv1AIil9r9baskn/SAC8fW9YWw4rSjvRNJXb93UsYcWMZiS4ntmYX\nVY/eTM5Mg4K0ML8egSdnx0HaBFV8W16QIoXkOY0HZueR/9tJQLOX4lCtsKJ5\nFwwoEpkA9ozbPlN1lZNlQKEUyQD8Xd0NbcqSGasI+kLnkbMhrWLAYyYN6qJc\n5/pczBfHRPs/RvpVGpReeya2HLRe08H65wQTtrmIUMlHtZ0pN0TEt9oQaA7S\n+hphxzt1gD6GldM1rSnnowvAsXjB+894wIFGAqH11PMZDdT1v+mEVesCsPT3\na69GZfW11YyF9qYTWDNObkJkkxGpHmK8OxEhQNbA4fNo4OUyxH/qno8f3LWy\nrDdUJIJuR0333laQMgcXnGbf+0oV0HUHQ0HMpxng6AjpZhKQKp3Lpdr8W0jU\nQ1GdtuJYJd5gtDBWtDGO2SvzsKnYblt01JpWCSz8miGAgP+TOg6RToPa64XE\n8ke8cE38XnKjWvjE01JQpkSebWnxIq7d5E/pNDiw0miii+ZLFXx3i1ssmoOQ\noL1PDVcv4Oz4ldrOAYEodeWXwbaT50+21iFsJGdB87CMUskGMP2bst9ftaVO\niRBm\r\n=Z8nl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcKhMeCH1ZQP8NFQl2LFLQy+PBG3muHQmhiPY0/zse+AiEAmEKxYbAX6Qup/ZIlAIf1snHnIvpZbz2TZibSxFM7M0I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.ca6fc6de.0_1593669556131_0.7037052322013302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fbBar708zWyLkEhRd1cWons/XOrJ2jFvmsUzd+5D0ydJJeQA8OpTZiMgR3vZAN8o3rKNFBeLGFIF91xd83rx0Q==","shasum":"c77526eed1ea3072a185203f985ce9524a0770dd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.79f1ec2a.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLGpCRA9TVsSAnZWagAA5RwP/2/nvVcJD1L9GBD6cdG1\nD8FgySRxkO5KoL8nuLQwUbEYCN1fKsbNFBxm1UzdNivSu57Yir8q286oYd5d\nL1921kc9iViYjpX3ziq5LkZYOMqOG+0nd1BSq4Vb2w3rM1o+DSihxJ3AWPng\nxVFngy0PkNtwJafEIvk5yC8ceZu1Gf9QqPCeL6QmQ/pu8lLwU0HpmjYKs8cA\n25YrSatnQkM4q1uA2pf3OgKqxX36tQl3hKvEJoIg1mlsOeRFRq1GQ73CScJe\noApZTD82Ruan0tlrfWPGSL/q6hGQFkqYViLg5Rt3oGYSdfW3qmhlAOVbhriv\nzs7lQQaxnb84xxTc3ijCpH4Byu1bWixQ+a4UYs9aU+BjYImeUWd5VQ78S5X0\nRC5ZDeXSQwQrEuA6ineJEyylIxx7NjsVoDcf0DP8EaB9lFTLmWsPsgPKrUQf\nRxpip4gB5ljwVhxhO2VUpuJglX8yBCibPWgSs1h+icl477UZuLt3VqVU+w5I\nCmUJ+7JjalE6tGzeZ2QljD26tNramUXWFH4ZxyFrXCcYyrYOcB+JXo14wckh\nKmpCR3UcVKKa8ogfnKhlmQn9KUXJ0JimULyupXHPaDtu+rpKsh1//CcE2mYj\nEu4brQ1YxPS/ArWAKVmSqiEIEg8S+JapToceWPVENoCAAS1/EA6b325jePNt\ne0ES\r\n=+aim\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv14DxjnG4Zug30jLGkSfcWfg5Hy1NoWBhe1u3rJ0bwgIhAMvNSBzbehpspUvbITuE/g2b47YHebmfKua20hnRYTDv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.79f1ec2a.0_1594143144955_0.9884007721839854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WZjc3c9RFtUXomKGcz2NdFM1As0Ovv3mpFReT6RKrUWcpHMYZHVg6VxscOvyqa9LQMGDJxiJl43YBij7hYGjKQ==","shasum":"a62ddf48bcda8b60ab201610502160a1a4fdb66a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.a7bc45ae.0.tgz","fileCount":20,"unpackedSize":82614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1J5CRA9TVsSAnZWagAAZOcP+wZF3rPTJpvXZbAs5cI0\nxHKFGFlEAUHuGLwHbnwSrV1wvpFJqjRHuW/ksCEpyrfwhdTEgsOMiT0LAgNz\nxb0cHhjz3XnoxJZYKzhWGhgnPR93w/uXmMFkLeMlyNHIIg/C+4RnWdgXoTQa\ntm34ot1qHUUJODi8NU3GRcrkhQxgZoOKpCOzeYfhtechbhwSg98HQE9z5csY\nSTdfKUY+A/0IELZadu8+vXszM8YGPNZBg6Ls5OhlPy4nCDxBE0ip4+ZgnPF4\nK6tqkw0FQA5qswGHC/Lfdwz9u86AdeO2bNX99+OaQmcv0GrEG+jieRcqHZHx\nYd48Pz26J+YzFwySFWKuQR6tUj7OsZdGeHyRUkpQRP6lEdeMfTR/pcqvj5Ti\nolATNQvIKEmymAbQvBSJdTpqutkZoO8KdDBxIBaiLfw+A1GHqcMsuXOb9uhx\ncoDM1kWhqLtZVDf3/LxY34LPJvSNJ5eYMDIZsC0CVESQWDVqIOKr+XhswVCL\nslEn2xNYLyBjYCwD9zBg2Dq00gA4QvnW73dsjWuJmIdpt9p9/o4OXHmdX4b6\nkTpQiK9dtUm3zMhimBdfRMOd4ADUuDWZkZkQtfiY5H0RDx8cGOsyCVPzE7Uh\ngeQSKaS75gZyjsSpujT/oCZy2aV/vtA3pbsf827Ey6rEgt745XglKPmCRTlW\nW50g\r\n=9oG4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJzoP6oHAmOtIoLTgfxUTG38+BJvTMIoHmhSkY7UvnZwIgWu1XhW3U8xkuOfDdyIoD21r4M3EAEQItxgrQHbmGvX4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.a7bc45ae.0_1594315384950_0.8009722236020889"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.b184bc1c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IE/07vG5zG8iQdpfS3VWHgQvi8jMCyIAB4cWxQe+hhs461mu4/Zvmr7UASNBWXzIdjfyQsy/hU/BY0YgoOXxZw==","shasum":"2869d5e0bff78a68819d979c3f64dd18adfa7134","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.b184bc1c.0.tgz","fileCount":20,"unpackedSize":83049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SjCRA9TVsSAnZWagAA1PQP/2f0nXNyq2MNx9/GEvJE\npWh48oOk4AvwI1gEc9cuZiYZc+VlN45RlICKCDkQexEmaL5AGuzVUHXSXsG7\ncEQWTzxQ7ZNDdDNQr/sjQpA9LSK9ObFVbzhPEpEbItFgssneqeW94jVNlzhz\noA0vUj4LTHHm79LTrXC8Cw5dtgl1dqwqefXSeEOgXUa5jV08hTQPYQylTG4e\n6luC2k7eJxa0ReqXpaLEScgIJhsuGTVnIcoyjwa4BbkbZLA45LWmxkFkI5mY\nDgB4kMLzCR/8jaehnamawzUUpnAQ7kAikjRzKjhl16tMKJ3bFGYcO5496Sj+\nn2SjBuqVysuvE+XXpbPhjUYxPGaS8KzpTksw/6UTDQL77djjpoGtkZatxX4L\nIN2GJrmmBxki5QBPxGBhCZAZl08v35ha9iek3oIPrlFzj1XH/ea1p46hKUrE\n370BiOfI8jm9/Lgmm/XLGDhJlwRs8A7TY8WTx/578Q3ObQIrblPY+uidVlPy\nVrmwFd+O6RsHiMqRX3VOsXRO1nBwAHplsb2sxmhc5CWb73LwoCdpGi2gC1Iw\n9YLYR387hf4gFCrxPTKXukNKti+rGj7LcjVKwWMXgwaRs3k7tdprEUAoQ2x6\n/WaW+vmkAcKJZYRLz8s/8i4c4pa1EAIJlZHjvPpQmhlKpNl6OWMgsvEZFvhe\nCcQw\r\n=PApf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNXiH3rispJcZCDw0IoKWNeANcZnZIaHuPn4fGww+i4AIhAJ86n43OGEjfPmSqazkljr60qXijZhK+MSiAiujgeV71"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.b184bc1c.0_1594315938611_0.26379055817873365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.b39fde62.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TGukXHinnlGSTMicGI28xI+yK78mvb5RvzeL3cfR8Vr7pinC00gjxF9+2K6LYQzcg2Frco48BzRaPBbc6enYUg==","shasum":"182132f7adc9cf164d3923b9e43780a6713ca895","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.b39fde62.0.tgz","fileCount":20,"unpackedSize":83049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XdCRA9TVsSAnZWagAAAlEQAJIwqOQCD8BG/cB3Yth2\nl4F+h3QWLDcy3GEFIRzscg/AwAShIoDkXWgAYO0vvnjeOtqJN47S0cl+M4W3\nSzhR3fnnAjGl7+MLGf2srxgz6IOMpcMnMaLK2DeqmoaX+EXDK4XxtcF8klmg\nuQ0tr7ic+b3WH7nL5msbgfJeUKmjigh5Q0l3Skf2aeo+KajwHcwsrK0iOl6h\nGGNLh5GJPJrCyEQMbzP2/R99pCyRN3lsyu8GesY1Cz5TiS4RJbftMDNTCtlq\nGJF195p/Z96HbKvqahjQ2GXw3asBG79sDa9RoRjUxFOAA6VNNheZ5pH4ev3N\nwcjEvv3rBCS37QtXFrWSVieNhl9KX+34fTpxwHGWsOyNpnPHg7A9wOtfbaSU\nM+cfupKAdZ8VnElDl++5RDru7kljgefitk7Qv9vbhIZ5gyKsafyz2W0kVVjv\nLJUeVtaxcsfyQs88aAby2cPPK6g3tyE2D89H7qscM8FNiGFEUzEYlVtjhjkh\nKMFvZzUgNb3gwIp6wMoBmJe4Z4fGI4HkjuT7VIjxuvOFyQfm5WvKHk2NbEag\n8kx6BzUxt6BbJs7eFKsiSMDKDd5pveEbDabxQdyR0kmNqE1ViDsda8Qdn8tw\nhDcNp7clMTkBOzeK0XulhY+oHg/qvVAH9U6ll6bFfAe+9fgoogPlNRAI1ZFI\nW2f6\r\n=PgjB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB1OCsC8paN3KX904wVFbN8+HWF1w8yQO3/3wjixL+fwIgO8OpDEaKWsRKuzPijzgWzv8cWKMRonHudJyk0ifkdNw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.b39fde62.0_1594316252637_0.7530368303528823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aOE96EsPgRTuTUUUOs/ucVZE7WdSnJDhRxtZeMwFrrE8kZvG+audequmO4T9Lgt79R2xKZKrjL9CIDaLUwzP5A==","shasum":"c1ae10b064f256bbfc54edb8cdee049587a37e56","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":20,"unpackedSize":83049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2ElCRA9TVsSAnZWagAA+V8P/25g3gfRHSoCoret6iGd\nk7x0u9MhSKxF5uxOaNNJxus2Ux2nxNi1cAKqGsRXvOurG049d73b4RK9XnzG\nAsCVdGwO+jSq7SR6cP0km5HXckh/y6o5is8AQi7DgnHpwiVPEl4aonvPmXPp\na/adyqkqmKN9TfylQ9ObEuf3FgFSgbOtCIu38gmcfOTQDuF/SDdN8iqe25Nq\nUL5rQoq3o/kIo5YFsdgCQBsxm6aIxXECeq+uk2YhlqC+1e5AwSY1fCA0iJsv\n30a2N4pBiAs57Mv3TW5SckVK6mS+9mcgvAiaIYGlJHU2WoPKaLXAraf+JU4B\nYdQ4lIgG1yMSgqJ+eMBOI62LNlhLKJEArCFTw7t/Rxvn1O311gYJ4a/rnv/c\nSiBeusRmNf5auHUK6biLp2QabK/mgRXd+IfVYoKIpQhT13Rt9QcgA2TclqYE\nSjt7VvGavre2Gkgvh8UTUJExTwltS3k3xxXnUrGjy2DTo6f9/1H2MJaiPrOE\n+KyVwpsrXSOUEIt8WWdiAnektZZSHVUFZeXI4d0KtM7hL+ZWEsh9RdMTxZR5\nHVmqEV8oUbagfa+FeNTbOWsUhUGXURyJb5kIUDkImxc5w9abYADk0XXXtnvs\nuXEiN9ScoTYTkoj1SZ0AYrEpkRAQ82E8AZVHSKiP2S9ZSLXpnC2261wrADES\n2IO8\r\n=Geol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIgQLKtzXv2B+csw9qvbVmDQlIV79KSi0pWMFHUCziGQIhAIgbK9Af5INUlT3vhuvHhvsnVe/WynhECZRwSREC4n4O"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.dfdd8d6c.0_1594319140841_0.18489710909108248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.11cf2694.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0SnNbbA/lb/aH6RW/5ATgAVvYDls3PgcfJ/ZyfRxppG9gRYMBFuAvfFKuPYH/LmvE92JsZGHqvExB63Q7c2GdQ==","shasum":"b6522d87280a71e41402c46025b1481fba4b1906","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.11cf2694.0.tgz","fileCount":20,"unpackedSize":83049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4FsCRA9TVsSAnZWagAAacEQAI1vb3reKQUMBRXCYy7F\npbsjbiM69WpTy4c7njwE4PiW8g1WnWhGjBjXwwz6Jzjo9UkQ1oqN3fpPB95f\nosLxzZc7NzBCIkvP2MCoBzCpv2vV4yddPXUMFzY91cv1gVpV9hqdGUJl59HI\nAIvu7rQfBV7HX7tCNgZbfpyPLkA0h2GPFly34Di8usDW/H5xzhgR2kxjagrC\nxZjf8O6NPaXxzK85W0RWpRup4HD4bn+QCKSlPSmnwqq524FDT20PQObumKNL\nIBxUjEjw4QYzvfcoWXioCfIc15wsD7Ngzs9DaOZzF/ymyEaKIO2kN7OusMBR\nNKLlO/FKM6fdfAcNbofFWt3u0U/4EpGBj9OnKxJnIbrnkikigwNR9m6fU+wx\nQVG4Exiw2p+Ri/iER1wINLTANjBAYMY/JrWxj1h3HaKHOljTsiRbn8Sb17aX\nb5y5wh8VRCz/IL86AMqZb5g5xpYk2WP3BJatlDzb7LXp1ZknDEjnVQu5GFao\nlEfbh0Z50ryFZtQWuF10HLbAgcvD0XR0Vay+9D1Z+Ub98CefpzJRQLcrE3ms\nOS7bJdHHCFl91GRkjO/GDIU3tnxiAs5oyb5z1c9F6S8YAZCpKn0O+Xzk3F8P\nYdvnzhOXHennHZ7XlgCXtcs3k2/CIJujf/FNTG9UkFxs/ZwNYhnpInof1Zjm\nGMjy\r\n=U2Ve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7uWGNeom/EWcinxp0kZc12KnN/q+QI7RaVlSdu/wZbwIhAIooUVM+UOxrpVEzYEBB6OLgGadWmp4sJPP6i7Fv5Nx1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.11cf2694.0_1594327403840_0.7209229649748119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.436d66e9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IkjMozQlg9JCnecUjqq6TGjvdZRu05Co/sNBmZspN3mrfDHUrDf9olonP2pR40Lqi+83GYMabQFPkzBlneFiFw==","shasum":"d3b1475fbb0b8b36047fba1d403bbceab3bdfc5a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.436d66e9.0.tgz","fileCount":20,"unpackedSize":83049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KPCRA9TVsSAnZWagAAIV0P/jKMaPUKvWVjYFVlXjuG\nso/kZEvRFCIoIyVDpaN17tZzHn9NaZC+PqxPgQTvBzobUIcvASjJ6dXQIqRb\nJ5W3cmZQe9ReuAol1uC8TdgT+Dna+nI/Y8+plVdMkZ68N+Td4WCIxZgYB0Jp\nRMl0XkVgd1rrxU6secKHRCdihmx/uXXxPFTiHGR5uFlq4S6anmuWOT3+sGU+\nA405a3Cu3452P/ZPKwIzGpERRnHUDbuSUjZkjDIux1/hRn0ZJiJggI3yMSd1\ncAcvIOqWnZnc/rntDJRGrnuSLK2TJ1FuTCY2RdNQAlK1tcSIRGYtVqtF7hu0\n7jMqOYzymTTD41VtoguoJgbNceVIWtZQE1W8PFBXPn678XJFi59Qpe7FTdJt\nnnTfzjun8cbYhayDW808BSUA3RUhdLXuyViwfYmXB4bqXWzIRFX6KGJnCyhF\nbC0XNOjjHknEjXI1kjsRE03JVT/sz901MLDzVA8ZNBEeb/0mAfkR2/mKZ9J/\n9V1vzB/nkXtPbq229ibMT7t768VzfuwCAWwM37zssiO+Pu6qodwoKBu72/cx\n6u8HT+wKfBXvaWme1TRXr2UTcftSMEG29zNnbnJuPEZn9Ul4tcJjS5ckNGcC\nWaWkYpJuhgMejXHu6O3sB1q/TRp8Z/wQDeCRLGrnNNn5HV319SQl7fm4MTXR\nC12d\r\n=krUL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZfQMI3JjLAb0b+VuaEGKIbRonJ0cfTJXhh7EQWLpaDAIhAMQsJ0i4Agi9sKMdh0bcxVRkLck9HC35uHQQFS7j4skM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.436d66e9.0_1594327694897_0.38140378530423313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.3a44d36b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KpIHbBG+D+7U/Fa6F67RunXWAoPc+4q4y16INu0Wig7DtBHPiocpIJmUc+9lHhur+hmorbf+iN7D4h7idSkg3g==","shasum":"3d287121166ea63058d820409e6f5463d82420b4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.3a44d36b.0.tgz","fileCount":20,"unpackedSize":83049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7g+CRA9TVsSAnZWagAAz6sP/3aEoLmeNOeH1xf3hOTI\nFGOW37L/AUXpFFFfqiCuhgtVEwJcureeWk7eOEaVYUh4W0dmov8xU1xsDaLb\n35OJs2uS3GKAMDjWiabpA5WmN1QELGkM5OW+me1YMweCM8wvoyuQZs4FlRuN\nU2PFBmYArItBye7GDckpRX5g+TuwhGBKn8yqAaKFetLINxEYHmtLumVSSJYZ\nCu3YSt9GOBqSQRNg8zHswGZbwsR1LtWYxoX/imf4oXcFcvSHWlwdGgax86Ve\nWY2houopTCkOzdNIS4LfESBMV6n7UuL6HYn9lbZvKM8PqwJfrZRO7NOEyWHq\n+Qeh8dUxTQxdmoKiSTTAF2/0gXMuCeLEQJuoDxmkZfyIBSATJNIcXSaijGWg\nhlHkFZDE78KvQupCFTwZxh1V45S85jh06CDQckSW8F5mTP9LDCa/Ll/OyYKQ\nVZO5mHm2w/r4nVN1Zc+g1DnoLI16l81Ci2xa9tvMEBG8Wrvd6lNj0UGAyPZT\nnkshoL9cCzG6PouENxto7tMpDFIeUGPCprKu6XQX5wn0s9pchiEVuw6UmyMi\nHSlAQ6zI8t6+Ck3WCidnh7UaZ4DxGf1G7Ed3Xlw/xbvuUJd+8qSXNlL1PnZW\nvoh4EPo7E753ylvejkaDwZwENPIdeA4Gp6xo4p+d0RkirWq+Q9CqSOpDBrqb\n9nph\r\n=6gpx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdRiAJn7S1LNxcSER/xNsjUtw/uBSTEAZD4vJL7e4nXAiEAq4UA9YGA4//QtZtUMu7/idPpwplqgRDh6Yl8qjrl40Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.3a44d36b.0_1594341437650_0.4079227799794034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/top-app-bar":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.1e7cb6198.0","@material/theme":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1vDBfVEGOe8wOXJPvt2Gak8TdeLM4Jp2KRwARTLfPE+TizLcX6Pun3lzx0Dne/PlI9y346MH+YTnkdNOdg4RDg==","shasum":"15c4e833f423ffcee6ca0c601060aa74940fb9f5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.ec11ae6e.0.tgz","fileCount":20,"unpackedSize":83049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKr5CRA9TVsSAnZWagAAWmQP/2ngV3Sosko1QaLcEtiQ\nngqhXaIe2LG0O1z1EYlUbYxf9cONeiOKScoIg2WgQPdGXcGGPBFSUBE455Oh\nQylojCaq3N/8HsNti5QaVZBjeZyhPRngQhbI6zRAvjauR2HB2XRA4EQ8szOW\no+IvYYk2VcBdXuvmouXBiuoPZndH3y+eS1KT+RWRMfIX8UdUqLmKePhSZZSH\noARo+lde+zeywwP96i3aFvjbpzVVqAvCJT6FDtADYKrbVwj4hZTGHrJrX2cv\nJII9UwWIRWN3/rk6nt/amkfOUswJ+a7wd6mEheylsNwM8vUnaAHzyj7VkHXR\n+WhSD/Ph60Rj6z7zA3/Yd+pS5tjlPn3BUDwPYp33CftHzzRHA7Ib60EMWF2A\npYOuycvES2W7AwY+RVPJHFNZgnI/zevh1W9HBGvQI4bIJ4M/pbBBqkJgZjTW\nhyQzJy9+gAT9PmsrP/1ykOe+OWvTPDrrz3F4W+mK4jAwkbiD3+EiZmzWJmb3\nKY/CQ2qgIlM7/B3j5neTBJTeR68zT3p793HriqQxgt6FPkO0KnQeXZeTDUYm\nAEYiiVo19lRudDRPGU1naPdRTRLxn64S8F2QbUdW7XGIx0uLOZolpxakQEmj\ng6W47W3e9O6WBES55PeDcNteAKwkF6eIrOyKHy8KyOLqbFIifYhRb++qTRBL\nDSlm\r\n=fZw+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAs7H+EPQ2bU2joIW/b99CEfyVckMBWbl7fxHq1FOMrwAiBW4FCgZphZW7zvp36F2RLh6H/BRa98jm1cG0uoin+N3w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.ec11ae6e.0_1594403576445_0.6329673365662851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.17f6cf27.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/top-app-bar":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-lZCyJSuZx4lJY29MbmUNAxirJ61KizxuugatZyyHFfYgLiJvILimfNr1ui2mjI0zAvSeQzz7CfwdZl+UxqCbVQ==","shasum":"f60866f429825ecd25788abaf4ecdfcbf341b5ba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.17f6cf27.0.tgz","fileCount":20,"unpackedSize":83049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRLCRA9TVsSAnZWagAAd2sP/jHEyrKbFeupIjoNbdBm\n9QDDX6dQbb+0mhZ0Z6sumq+8WxFMztgDdlqMXY3tSVn9gu6e40QZNHO8feXg\nRUlS8+Fu1GMaq2BfPoI2icLgyF7pvdZr6z2VgHUcfVI9QQAkuC24EFQF6yhE\nZxjQdr3j0R3mq4FuY3js6EwFTI88kggx7Y6a5xoCxYB8C2AXph1zdjs2yBMV\nXifW6fQQ545fiLsxeoZA36juZQyjNrgPSLHr5GuuvFOHKOa8m+iVmEKj+lyB\nZ/76rgMKr+NX7xY46oLlfCz3kDfCtGb12yXbXWHPFOXACH8MTwynHxVfONL0\nOwzz2u3ZPFZUlBP8B+ZU7Jf979HMElH92IzNXx5u9K2AqC+i1jeQXRD28kSo\nCEVcqcZqfDFEXcrEKQ7AoKhlQdpQOYWmUvtC7WgqxYb4d/ePe8F21mfa3RZv\neUpqF20LD+bGRYWmkFzixxoJeVFl7a1porocY6JgJXxZ17kfzWmDaoG0oATM\n04bmjFONZDqnSF3q/5EdaL1XA1ifQEF0yPlE66o7IKLy88MWfbQCnRUg5JRt\nZihRbZGtZECrmSeNt8OSFxAbadlC+nVSl9EbD0A5nThY6do+WlsMP88lVQi7\nO83FoUW8EEZ5PFXIi8Tj73CqY0LCWFLjplChJxxTcbCLfR+qVeRUdEfq6Uzo\nHMaz\r\n=ibpf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICinn2dH5BnnCJyfvk+FRBzGg9K5tXvQW1hbcTESBVYiAiEAr5Pqowzq08MC9NQXlG1j/t6ItRkmkh9JCqQ7EE3Iy0Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.17f6cf27.0_1594405962800_0.4020579255605512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.efdfbc21.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/top-app-bar":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.b2edaeead.0","@material/elevation":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-a4GQhDGy1gzMkrGjSakXECrmrmXCY+IVQ0yfG7XULkkJ4NAzGEG5F2Y/71f2/XvxuhHcKDPgFYdI0ifPn/Rfgw==","shasum":"f30d3c85e062fd6313ef15b1c180c34006b544e9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.efdfbc21.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcKCRA9TVsSAnZWagAAsL0P/2C5JDCXQcZO6i/+BNjO\nc8/UQP9oKoWdP/ADRcgxLLEa+8tvyB+8Azbf1NYWTAt25V1VSrA8MAMs5Ith\nZo1u9ggjW/00RmUwGwWHolXGJVq1+WlCJ9dYlm5yD16S8rmXtI13U1w4aKgr\nB9GCwUjXLvIUZgWtnGfCo+mNxhY1cYjM8tVnViZtCwbMSIVkL+E+tnAdCPCd\nfOF6WLUfsKEeUBtm4p4Y8Jf/yQiTOPZcH0gynCOMzOyXj02Alyb54h1VRy4N\n5LuPWXJ9vNcJHOdiSGBpD1XSg0zDVMP1eYJSVG6/rsl2wBYg0gvwsOsdvrGI\nvWiHuWh02+WFj3UKiVLuK+8zKIeHBGnw1LliEB+ZLkUtsFRbyTBbEaIHCxK+\n3t7s/Jn4hc6Fzqdc6fbgchfnPj5VN2D/z82UveU0ytqfXByoEyHNWYrrBtSf\n9FjmD5KOokEGQFnVI39WwUSHGppZci0gN8Cs8bcc/fnd1pfBNsArSklNtaMr\n1WXjm/xYe6BLqoU/sdK/OuGjqBw+QJQ/WBTC3FQIJdZUeYqSrk2azmoiiYP7\nZHrz6CI47YsAm5q/FASi2xNQy/YMTS4ZKlhw8lYn9+wAtJyR2fxKUvwS4mHq\nFkIjIrZhce0pn3bXC87vpt4dWSMeksX3caeLXJ6as68pIJMO9sVOjI4/mmUv\nSQji\r\n=7gYb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5xadtnfkIoQ/Sl5yDRcFmV4SnxYfRv1V7Jds/eLzw3AiEA/M0jtL4IgFm6OhJ4i7rPiisUie8xNIIx+OqT621x00k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.efdfbc21.0_1594406666270_0.367835379410284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.bae4339a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/top-app-bar":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.5dac1f624.0","@material/elevation":"=8.0.0-canary.5dac1f624.0","@material/theme":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UhBg+qciw0IqM/1q3ZkrKKOtZuNEdcgLdny153/xRiVv/mu0ZEFCnGY5c1i8quC3RME6kfBhoOnBqqW5iu6ctg==","shasum":"b6636299965ca1210826ef6d652756ddbd87cd7c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.bae4339a.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBMCRA9TVsSAnZWagAACl4P/i4DM3Nq4/9Al1hA2+Tr\nlsWW3LK8p9q4TDOONTy8e1mNCadbw7q1qAZ/2xmfGYIVD0us6qljOq/jdXAS\nS2hsXXZkJy7iGUMP6jG+QwrN97m8Rk+ixwe88aIrf7m/FGIpdWWfJkHKQawN\n+DVkWdL4+wzipQbo+DAK3BMtCcDUc0TCsYhwb4aB2UzSfFpZOn0rbClIGrEy\nQHwRpltot4JK8R0gXwWYd7OP80aq6QROGR6zU/dMlQtmv+UgFyoVxHvmNH3b\n/e83qSlOMMlIREHUQrWSMpo/YmNpXQpal8Ngm/SBx53PST5m9dojsV296cQn\neVyUBK+K2vl2arRF+q6pGE9O7yi1OWB7QMMYedeCt06YPQ6RaQ096Zvg3Maj\n5hks4q2rUYiaUnEbTL9Z5oFblgefWL6DS2ozzCgKMHaSrNNc/7SIFtakKodF\nDdIp/M34f2+jLkWJeAg3kLSudbK/vN/8czuUK3iS0pfFMZFUikhBTu4um/wB\nTszkYMXcsBEb6fiB72yWzXxUWSurkCDhV2IQx17R6mqnaDh9RwjS4mLxR3Ha\nkmjaGXaAU97L5azZKeKTOOv9ee4Z8FZmeBRIdhbCh08gS34CbrWjT9PPrnUU\nYbDHEXgAa7c6mrVIJkZwTivPI+FwkmqrFZjf5rAFa1pgaDy2Ug/MqrvNhTWO\n5q8r\r\n=NKcj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSx+0ASqvsL4bImyNvkJ9i0Qr9hDC5q31k9o2CK/68MAiEA91kKAcnD+rzaXwbmb65qkLP49L2HMPHlLxrZsJAn6n0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.bae4339a.0_1594744907949_0.4082621535305384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.28eac13b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/top-app-bar":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.e6e23019d.0","@material/elevation":"=8.0.0-canary.e6e23019d.0","@material/theme":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HwN6agErbOaCfOaDglfCoW0X6KjJB2P4Hlnppc9QQixtNjf4Xg52ftgzgPWjTDznLse9evYDLp0dUtVQO+Y68A==","shasum":"368efd8d8cf259892fab58bb23909144196f716f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.28eac13b.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBbCRA9TVsSAnZWagAAugcQAJd7yJwy9RO1o77dSJQx\nauk/zQfM1uV/DtTgr9Xkbg9mgP0jB5kXd4iIdtNMN0CV50lFBiV35jolpBfd\nR8EFgsa5eCrtlC4c3eZhoavg0LB0ZuTcboLhkXIonag5IODI91SDnZIY9934\nGKPzL2mEFSXwvTuk+f7kqwpKqeKhzHgZ+c6Ef2DtaIvw6othHWIn3OZcpz+a\nXcAWBCKoNZogDZRg/E+jf3eLSKEEfzGvoUCvwIj6GyOrQcI+TllCuyd3ZvMW\niIUVCH1rm5EnLHyv1jzrDsuOnNZO8D/DBdMorUu7YGema9jXhHvDTTCsEmcx\nKnV/LWZkrfuX4+Lreg1vXGf7m1Z1KoLGBtMpFYaSr25DiowhhC05OXLHLDJN\nIFzjlhx5pyVsNhE3K358oPVEnFBAT/NBY8Os+CfHrzRLKMYxEMKxjzw5vvfF\nfuT38H7rbGKWfsuKd1Idmm0zs6xuowTxGZDzpfCtTo7BsR4F3M0TaoZ/ydyH\n3UkMdOMObzWeb4EgaMCrinEJEsbMddH9arh76ewdLaUnzgSPp52XFoMcDrX6\nm6FlMtiDX1R+Ju8rswuMdcMkxt8W9WZWKHVHonnpThvkP9TBRvIi/l++rlv4\nZPqRS+xeThXCfdPMMQo9b7wwsYX0cOuMIUQPBgRcp3Yw5BB6Nrc5/BG2wiPx\nQ7v/\r\n=LAQT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBEHT/HcX7x2hJ8TQVzal879Wl/2GtLHDqRnZkR+FCUQAiARLWStdke/T8S5aP98dMmGmnxLTbYDc0ksRHPJMQ1vfw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.28eac13b.0_1594765402701_0.151463532474595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.44966b65.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.44966b65.0","@material/top-app-bar":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.ad4df58c1.0","@material/elevation":"=8.0.0-canary.ad4df58c1.0","@material/theme":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-G4iyimLktRFRpiKrOEV1v1PfR6ZT95w3xPzCDDv3pXQVHeJvDFtJU7xd0NYWCkmPwbalG7i3rRxuHcBTXez/ug==","shasum":"7a303ae6f9c9fa32ec43f88a89cd1d2fa74ab3d1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.44966b65.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VBCRA9TVsSAnZWagAAf+gP/1uisC4snZFTvJl8T3cs\nN2nRBIuWhYjn+oQOPye0btx6w4Yp7ASjdPznxUcGUmv053hAFSjDvxevMMpF\ne29KKJVtuR6BTX+tUG30vEiOUDT4SPHOXUrc1wbHheyj2oY4Rrm20HgximSO\nw3iXr1PUPTIY/2yyIc1iMLEhcRKV4h8XVcmMuhggHGnbnFE9Aryqute9HoOR\nJdU8YzWjPDewo7Pmqq1dmdH873Y/MJAOTM3wKC+omVAA3XDwGxEHrZmGBtka\nJnRI2GhcN9CrTr7GfFLbfV52fh0/+4XdcqLNNh8D2yQH6zvt6vq6kI+Tgof7\n5/XqR8RdOUTXdiMhYTvOPdk1EjVFAW84LAngR8pHbFtOUqcidE7inEZ2vMoR\nsanUyTNG3+sJB1vEMAeSogUx8xzpLqYlAazL6SKI6gzOptm2BQQYqjSNft1l\nrUshcOwS1iFsz9vJOv8mWt/UFnXr7JAoYrZ3Xd7qz4+z4oxXVmr0djIEcvzI\nMkgXH6v+rTrakjRbi0/Egz6cwfjxYrLwo7bZd1b11jzUvzVOauLa/wUUDdwU\nCMXIhX0sHi/CVIJi0Yg/uvikJ1jqg40diO5MizuIUX/s3pznaceA67UplzrG\nPNsFDHvD6MBrRuSnJuClHPuB3It8vQYJZm/+lYFnLPq178HSJU3fNKP/ZVvT\n/C+E\r\n=5RCy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9MxUbGoTF6VHanj0O1UURM4OtSxrooVjgMW9T55x/qgIhAOZorAAMn6klnzL4ZKzVbnfCnaixZcVNbESfKICLlM8Z"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.44966b65.0_1594836289536_0.3541009861971949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/top-app-bar":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.01db89053.0","@material/elevation":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7gNpKu1xkWFXN5cSnV9btsDbK++kTmp8YB16kedrIY03s2zgVTI9CUrGbG6IWthH4xovLNQFuGF65d0bYCrhWg==","shasum":"616a1b947beda15c37077f295470a45af440a07b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.3ef0ef60.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZHCRA9TVsSAnZWagAAhy4QAI7HQ+pJB/yHd4QBDJVL\nSuITAajwwOw1ccILKJJew5CkRVS0bzLjY7hTZEcAeTOEQtq540rQ87CEOJbu\nWv0ufctgkvOQeuETRX+eiYIBYmT3QRyjgV9v4mlXx4NmNN3CZesViY3G4l3P\nOa6EbfezUyFO3Ty5HY1VV9mvqTnrNFfRuRO4FKZv4mDhKAeuNvDAMr5mJRVw\nwN1QGanKfXDAf2PxVo5OtwE3hJZNMYdo3YIHZSKBQIw2BkqSGnHA4vaIDe9o\nJTG3gSwj96lPwlZN925HPPNWRkRPbiyjyRZmxQ+FiPbWZ5QJahOGavPU69ZP\nOHYeoeoD1CDHV0MPIckKaeC3K73eeMaZVjRJ07WYrMHegbRO49CiI4rh2qNl\nunA7uB0GXMAhzDylALsPkCIPu8DQbTv0XwgswWuIDgkpEL06MiHZcL26GR61\nndy6zXX9g4NgaybfhWxi09jrwnHhrdbD9+ozhWpQKtfptUmM0HIlheJtKeSW\nH/5/2ERzvq6gitiEiZ5nENWAqZVegHOuWNI12K918ocqBh4AdtxBK9aQxqAj\n5pq6Il1srzAV9t+NG99psqdIKUJhVUhm00+XESsQUJaPHBnBpO2iAHtTHbNr\nNJANJ2a6xalMg7Kczv7VkpYbim0KMBHYXAssF/voRzmG43NuoOj6ljBUwKMn\n1DH3\r\n=pJPj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/B0yHI1dOCwB1McekILJKugHUJ0ZNTzbkAMt5wK+CxAiEA1ztZ7woiXjZ1zezLQ1dcB3kxLT/2jXKj18eK6p+b6UI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.3ef0ef60.0_1594918470583_0.1670485295257922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/top-app-bar":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.01db89053.0","@material/elevation":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sRIAzDv4+MeJNn4UG431cxXGrisnwzu4QOPqR+qRSnoBgH0qlTZrMd5AfnxbNzbbLPFw56wIHp3bnl84GprKeQ==","shasum":"67cf8a4b6668fa0e8715d36e8021b95844d49ad4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.fcebf9e6.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZnCRA9TVsSAnZWagAAzMUP/1PLxCkHa22ttNJnQKY8\nSg1Uuam2SJkU2bWBqQYcIYwaZPu1+6cvkC2A8HVATJ+/NVpTVfquxQ7ptZE8\nSfdrWBmh9ovZd+rGLx/LrJYQJ5I+JYPlkPPbTADlNLA11ypEI3bUK50fU6zf\nqL0DN6+hGNoqEqpvmFbbXHDSQPM8qvs3+ETp9WZ1PLk24UHnJMFKbo6fxccQ\nWCGvrRsI28TupTRhIj4kQchAEdfopkCqiiN/WN6u91IWbeYe+D5N+JdmEoBB\nUmQP7F0UxxsCJgGVyiZsEk2K1ap9Bb8vViUYC3giVjWjS7+buLmVn405SAOy\n6zQUCxRE6ncilnA3ciYGDHsGNgHjwGT3Zye8c8i8lEzsMZcLYmX0yPUbu6z3\nbm9izqb13kxdM4P3ha3itUiLN1KGucqXfF+a5XFIUXA617dKYRPu2a9BPTzS\n4N1MC1/YyJ3qXyNb96x/0bm0aArbGhHN/+pbxyUSoE5KsX/S7CMhsKLvc10L\no80XWA/8SWgiPEZN9n4ekBa12tyn7y4L4MM1JMTNEJPv7/VBMNNu6n5H6O87\nsQoc6DKVYIah0zGxOto+nAyljZComrmrY7znE+g5MXUhUDRbMEIUDBI+q669\nj3G865qT4hdI///YOyYy+q48yNqiBOWV1vqWqGRMKx8T5W3Ax6Vsbp3RMnPQ\nnpz0\r\n=W3xM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYpubYDrXCmls1hHhN1AikCxOtxDoCS5tl5j8tcOVk3wIhAJBGeNIO0yGsf4tvsbVa9NBTU+QYAJEBXSST7IE1JYr3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.fcebf9e6.0_1595270759279_0.6797800711345838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.b6a772df.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/top-app-bar":"=8.0.0-canary.fb5a4cdeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.fb5a4cdeb.0","@material/elevation":"=8.0.0-canary.fb5a4cdeb.0","@material/theme":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6MukuqDwHT+mmaYdPPi1kGgJ1euZ3k/P8YuqC08goV7bOk8rDHArItQatswugM/M1MdVUTWuG6q4OjKMj2xTzA==","shasum":"32efb65b82cddbb4c5974d6548ba679a5856f3b4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.b6a772df.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7FCRA9TVsSAnZWagAAOgAP/0exJkalEfo8bhUsqWp3\nKyFnf7gaHr5TpEOQlQcWlcuKQDUre12rDxmiEEoQ/EovoYxgTDJPV1kwIRqx\n62wlyha25XoY0eR33xhkWfmg1SYrkMwWqbXAHyT0ilOOpKUXiSKPduNhvlHy\nRRni2Bssso57FzKo9mqCP02R6mYodwTpq/7W/odotE20d5fnGdVw378W1pFN\nfN9hmi02nGZzT8GOz8PnKL5pQv0yF90uTS8aTa7Lwkm4+MpMZfTyEYDtKvup\n1x2HYNTNRFqgm7JZzfohvkrp5WFjKDRkympDfdJV2OxaT/7FATXM3TckrWD+\ncHqvrnQt2G+dPO6E71szYJ1qo341/fb/2ORDE9xVpdCR1vXzeRNe7a4evwAO\nO/yMXnGbxcUfp+7uVzDhAarXe9LgQ97aZtk6JGrsmDgBmIq0TCt2iKImLQ5i\nV3RFl4iwXyfeDpDhod6Cm1zL7s2kwPkRQnMWqliWSmZMnU13pnE8C/nZ9ZfF\neSSXRA2wS1qT/mJvZOFLXSaM6LIPwcJg96ObTdnWc+mOaQHx+UkfO2eT0uZ5\nOKY8YTIM5Bqp5lC2zJWRIrlzkZUYsvEzvfWjkIVfYM0fhGN3A/1NBd5oBugn\njMRBAbnGnt/H04M9eYasAvmZO6ZQ9oD1cgB+sRoCe9NbbL9ip1s9Qce0o2Vr\n7kci\r\n=XdQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXST/QXOc+KHJcolhpjdtWjHlpA7nIXUBj+QpWFm9jAwIhAOVilt6wCuSVC9jsDTZvTQP+aYJ2Lmw9KQ96x/OnMRN3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.b6a772df.0_1595285186011_0.7272877675256302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/top-app-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EN5kkt+CLcruLuAw7CBmQVdpg63eh57q51gvdj+WpgaeCGaocma3glZks1oYDgQUV9i8V04zirFGwRMFmNNjeQ==","shasum":"3430251fd537769fcaa7eb780098e26f0f0be48f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.f6a6ca38.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqPCRA9TVsSAnZWagAAtw0QAJj2tvG5in+RtZEXklVW\ny8EpoT3nU09m/HQFZuRWJIyKT0y8DqNJ9Twv5NzGMZUeQneq481Onf3w/iIN\n/Ia23GIr8ZovuCiMN0Qd8B58a3VKANCercG3NMPBNiY6nbaq+hW8HVg1pAgv\nZdEfnkKlvI9VXmRT6b/PtjSAufvcByFvGrf7Io4SUjINt7WfoQTkhWB/xjcI\nFZJYBOTFSJ5Yhzg6nfUMsLgU7N/DGowJCwnxqY0s8t/vNF1Lj03Jle4VnMga\nEzTdzZL3MLgmHci6G8P4TQtXzKA5f541xOE8Peqa+AMmuTbqW6dtvRC3Lg4J\nvOcSV/FS5Ek7kQ48WM9ZOtoZHvvHMz83uVca5r8f1iWBjnD0aGxeYl6jOCnc\nWdBovfjqDb2LKNXQRmVxJ40TTAztjrr0xYszezMHlYx8bHBwkHrGU+B20ri5\nLStdPbLJ9iBPXZXAZG0B7FMWUduc2CBZKuaaDaqN2ZAnd+iTR7yKCzuKsXd/\nw+4jd70aAr6KNUCqy8VBlQexsCVmn7cZ10IojbrhGQN8Zn/SG9OyAdFqiA+K\nBYJD8oUiQY6I+9kpiDfBHc5n0fOQhn/OI4a+YX5/pFyPEPMRVaGSL8zlJXhA\nadxiUea5V5KTiSG6qTBv+hLjU5Vyf+LeWc0FqcyCLVFL/kAwFMgcJbpFa4am\nC9r8\r\n=Faeq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaTu1ZzHQcYg8w8dpjIhUeV5cVDl3PoiKcl+/itGLWxwIhAMtq0Tj+TwNXGqe1VGdehxwpK5VXWSbFkiiF3UQ0FP/V"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.f6a6ca38.0_1595349647589_0.6336582853776942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.647dd6b7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/top-app-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-z3aau6HU/h3WBckusMU9ayBbaA1lgJpqjNjNLOrKA/JR+v3LNg8e6NWFif6rv4MqMR5tP61pNKqQSk+YC6LxOg==","shasum":"8b6ef2fffb53d7f7a369007b5250606fd1e15d71","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.647dd6b7.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzdACRA9TVsSAnZWagAAJvsP/0j5PnbV7hlp7JiZ/4mo\nHSA3S/mPWQWJzai7OA9awSqNv9FJ/dRQkQU5i0zI13FprhdNh3gSbAOCnrm6\niFBkDy91DMWK0KMRmHB0Chr1wjIXfpeevsZGH6qLSva0bLmP9IXGTYNiZZvA\nyFyoBOvSZV6YZ0eg1pGnz3dUmZKlXlg5vtlLTyLHET+QMxBgAaJmlQ5PJKnt\nx1Uu+3HxuLX69TC/huIVp7fuM59x27ZNutdOM58sji9CbvOpP8M0grVRdeKc\nX/3rCVGR51LD1RrXAX6/S3rmuTZIBVfT65ybn7cPYtbwdv9nmEoKHocjfS+n\nryGxXrAVxBHdE1YLq611Eq7O+T7EMwATe3vo6m3S+Ueg3X5kYEEq9GnYLiTS\nGSZu43IrzAeUVtyF+BU9556SV6uF6BTuaNvNktDdw8TtuOrVAeH1Si4+udtZ\nerWcO1X/C6ybr33aSlI84V6jNtXz1rd5eyaWz1xAN5F37ROZbOXXjvfjVCa4\n5O0okljf9qJH0n5J9+zFgo/TqNUV0IHY8fvy0QoEcfRgnSc3bxpbeu20J5bY\n0zOQK5j3/oJc5ulF/QSkj31+RXad8dF4AchT6yRQRXI70lc4GecyJxJNbt1s\nc5qnGhtK4MG2fY1/VCRS4tDhgsx/6jYaDkQpWbA/xxOTn3n9dMHod2eER8SY\np8Fp\r\n=Sj6n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqd2cZ/aT0QpZV3cvekcqjyL0wxRenJ+7sooOACFY35wIgZnBI0kgqQgWkog5PRIJVqt7oE4F5EsnKVWUIGyJDfMo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.647dd6b7.0_1595356991513_0.13026459919138866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.3cb7406f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/top-app-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8Xo/Sxg9YNHI9RGoYPdPeB7oS2A3vHoyeA1/I+0OFT6bQZ2zp2Fle4zyZtGfcuRrmnSZpbCDaqj1uZ9ld0oOjw==","shasum":"c65774d9b76e8c2618d305c1d1d93a3aa869ad30","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.3cb7406f.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwXCRA9TVsSAnZWagAA/c8QAJoaQhvc4MHn4hW50xg1\nAoxwgf0zo4WiJZxseKhEZMaghlQJToShxkbdmqyzRoQMRqp8VXWrL/8Qun8a\nDDSKE+UluKtrmrk/oQxodqwohTbHg12RH1h7Nvg4pUrZ3InL1a6tewehPWya\n62k77wiEgZe8qOs9CKMsx3+twp0/KeiN2sfbEVCgySHwCN2avmQ6mVjzFIIK\nkrGT7rroIdYL/Dr3+N226E5fMDAtbTU9Qqa4F+ci+8ArePm8LfNcscz7TC9H\n2whk/JpJzCqb/qO3/l+ytqfKfKCcN7jVLnvIsHoPzYFR9rHbY2gyld+n+UfZ\nbQ+B3wLi8k7Tl8PeNdOBcpbR53cI1UE+04o8/hdOE2JGsVSuZpe+HsWrF440\n+nYcrIttLtUlcA3EsVaB5NBLYWZdfqGpM0Ii4VJ40+KyFr7iXncSqIt2Jv2Z\nf3yKwRTCIAm1sF9wwgEsKJmqwj25Tvg5tuX1Y5xxUTz89QYTAD6VHiFBE4bH\nDMRLaNtoArGbl9iJMvjcT/L/8ruVU6SLk9wtc5CpXXdwYvqqGPOb4Wt2RnF+\nN6whLNda3SsZ5PNvNjALzbR9llih899py2jV2z9ONrL6lZzbKM91q/mtgtpW\nk7YbH4dnao1zMauTi8QvPDGJz+gNDwxpWTDpduyd1BoPJnCkDVdGneKqLqAC\n2RhV\r\n=NlCg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHo8ueO/8YpQ06wp5LH3tOcSTZfna0BVTQnVROQJDCdSAiBVYON7UOMAWVW2rNgaLAJ60/fW8z/kr2Oi7PsAuRDs8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.3cb7406f.0_1595444247411_0.8942669271257457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.5717a5a1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/top-app-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1ZSXUst1FNOD0TxN7FU0pIbbr4M86gB1CryICB1+kR48pzBOMT/GE4sGmpkfMqxtEjjzCrN2lS1JHyKYmJbtdw==","shasum":"5c9d5938fd5ca6cb2afa8198c95f02592b3e2a88","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.5717a5a1.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLInCRA9TVsSAnZWagAAlOYP/jphusZgNIROqKk7MxO4\nb7/YCdrl8pP+s/dZc2oc5t9eNGcbyNMiceOVr1Y5gRd+dTlHU/YxfaHRV/nr\nGvjyNFcJglbXvxQRsQz+uN0c35TO4vJzcsBvmMoAhVZA5/mSF1lDDQe2lh9S\n6BW3QVCJZrNBTsw9V7vW+Soo0HHeBD2WT23WkSI2f1mCms/czocqgxeLZeoH\nHpsSqI0sSe6NDssfOtorLfa27ycynoWz/Q1RP5FCbY3cyPrTwhqu7+OaT7zg\nVlD9DzwQRv0gzel2+v/ofnQ4uWO6TVbu+AQ9Jq9dNSPr+Ue8rawLdMCuBOR5\nJNVTcQ9/XhK+W9zwTKEIzPGBqfyKD7sVtfbxnFQ66+1qbJT9ElZ7KQppBibz\n3wg1DWHuvyyw0UcfSi9dG/qFr+UajwspOlUm/My7jtKRcXGPxmbdSzWTT8m5\n+RrngcT4FZxs0D6vKNOQadVrN30nFo+QDtwardukJvh4/Fno+Ryyffgb5E8e\nar2dom736y0TpvDT6LLs4BDUXeVZ7gAdiZHuqmYueb7SE0b1Yvhj6lmsLE++\n3jhKL5kjISSu2XYVn0aWf/e6Lrzr6ppbxJQ3pfjHrBxKbZXMkm5nDW1rRgG+\nlcSUMgpjB45pEbvNwxShrtZPaTNKl14mYJ6PAPQvnrZdqRWKfs3JRazf/VE/\nvTXM\r\n=bTeU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFRkIs0x8Tc7vk9OomjgvkwEmX3XxFM3a2MvEuZfa1GwIhAJy0y6G6+4W4n9TU71WUiMiMe0ZaDMmad+IV42VUmU1Q"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.5717a5a1.0_1595453991057_0.16176331723326465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-3YYUpHeACZzyD1Vk3rKklTTbPpbK9m3PxV0kJsj9SP8fb+nOcuN1aor1HFay/a/VNsNCGzqusbvsd6HwjsejnA==","shasum":"fe2dca19365f21bc91aa06bf328193c92535f32e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.d84cd4b2.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKdCRA9TVsSAnZWagAAY/4P/RU7qKMxnVHRFuEtimI0\nngKflFXPWlrdHq1h1MKQ4sJ3dVssiqMiiM4q1hoGHARyYKWVWBvD8xUiLDFV\nlnFlDaxHdj3vXRiGd8xnm3a6mvoHFUCzTnrnqrdPFGj5W+dtCc4JE+AAD4mE\n2xbbU50sfZnjdbKmXjecHlwJKzSMsTS1IIoWNx9AEI1QUiInb/BQfjIaVY1U\nPmjBCN2qiOad6QBJ6c4iQtXXdBM4da27c/8kYtv+BY+BM9PuJw6C+DFWUG8J\neIteLbu8HFbC2cZICI6aRcl4AbxAX77iiL+rjTJLH4SrBtt/FIyHgRGe/Hr5\nKNX2Ol2KP3QMUbQ/lo2PZ0Uj76ZjGf168y71I2gsbKpdIHLhfrxy/7jN/+sr\nTD0ULfNSydd/q5MVxbG6rin8r4CCEKUsrLjyWB6QxNb4VrQht0qodCMYjK0F\n8tnYXPKNDSK8RlHfNhbar9AhV9/tWWIzBlkiig1tB9fdoMBbEo1LL9wCn6x7\nkUuufFZ0qQ4Nwwjvo/R/ZkHiDBZLmvu41JLE4u6axJlqKUkdCVPFrQKJ3oU9\nwIKGf4v5eVOg+j71py6tr3tRQhBLdk0Ec2AUBezcdX65KshaMfRRlFGM6xT3\nmjOC2cFrW76YB5OHTNmHpyJaFnvavDOxbrp4rvIGQJ8Bn9lnvjwKvDuS9lSU\nG0T3\r\n=T5Xp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuB94gFHPdbUI6SszT/ptW5jDj3v8ZG60ZQuKY440lXAIhAJ4BU7whPDq0Dpm2ij3zF8+ATZHBc5gR9AWUKoVvaDh0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.d84cd4b2.0_1595454109549_0.6445542574050047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.f279e7fc.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5H1jk4odPL01Ca4HJ0xc+mX6CqrMpM1alyh1wS5W5goETYSdtNF9sYSB3I64ZZFu6teSWvadJM1++fUAVRxVTA==","shasum":"fe2afa78e6679525c9fcd54017d65bbfc00d86e6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.f279e7fc.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcECRA9TVsSAnZWagAAHsYP/3Cih+gn99vDHUkZ1CZx\ngVO4bqClJ/K1pY5ybTNx4rElMG5tTSh7pIbs7bZox3kwPTqBb8jIWlh0sFlU\nxVxFh1axxuHsPy8hXv/ZZiFuX0iBtucHWod6RuFVX95CuCDwsDBINe0UJ+5h\nxpQKcr16/S2rIvf7na7xCDtqG5aStFFvqPzOzjFgODUfep8S23HXec07YAzP\nS/NzXkEnz98r2AQ7TcLjBJbsLvp88cCoWFNuxuvSLq6xzdpdK6P60mKOcDRi\ns9lDxrSpGZh2MAI5uyVV4IJDXBXlPcZpH0U/gPfwYvrcQPCp8tKjY3G/k9nf\n91L7BDs9u1UP9Pw3WTLdjGuuQYutoz7YhKdIQNsEf+JiCmiCfBKg/c0QDox0\ng1MMaXD8TeG8kQb4TQFBC3j2bnKiMQDE7n6Fx3S6COHiVZyXiO4XNQDbSIRk\ngAmhwctfgOr/CDvoNcfsPRfxjs3IPj7z98nG6+ULLmaT9sCtF9b4BQCb3MdI\nx11EUSNVGunvyxvJFLJzVBfwbSIIfmX1RK5QJyhK0d0Cq7mSXmrm0CfzAcc4\nk+y9LB6Hyljyce9bXL+/A2lr1jxlPR1dKP9UjoF0HJFxEAPka8mo1CFfWnw9\nN1jIL2ChBJqGKz24WSRu66NjxIfbY4PrO3RC/v8aC82VGcA7RnOVbQua2zVp\nUJPR\r\n=UXee\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKcwwxYt0LR3atMrTs1O1MFJozqW7bZUPYnxIvUqPXGgIhAI2ia+/kT/esYU8oAe5JXK4jpYF1UM+tLwKmkuTDZKL8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.f279e7fc.0_1595455236450_0.08715629935452363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.f181e3bc.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dPY/Dpkqv6l41LxRa0UhzrE+npwgjakOTsUpwlWjE5z8cnmLMaZLpFP5XEG9uMbVOkujgRszJT6MaL72frMWWA==","shasum":"c6c16c58ef247a4f69ee6eb508f91fbf314c1cb2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.f181e3bc.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLd9CRA9TVsSAnZWagAANN0P/0yBaFF4OGA7mpDOrs+I\nceklgsr65nF64VcZB/TrTa7yQfHm41g+O5imKyVIb5nXo78g9sYPUDtNHAwG\nNBLqzLHNWdXEWYUOlvtNXIxK/WZGjivpnpN+ZBrGbg2Q8PJQOYacVgJkhzYy\nQYUAmS+l2jS63UVmry6vDFbLmFOJcDjdQS6F1h+3a/CWJ6T9kpVHJmwB7J9G\nq0VU+pR8XpJfl8KjqUU1R89uj7f2ByyU9X7gscC0ik+9m/DLdJp2Vr7ObSZJ\nfLs0Xk86ZZmMQCbaqfT5zNeWgyGJE5Fq9AlQ821606tJOwXzChokWu2TAqx8\nKGtfhTXLtQontv+sl4i42EI10l0X7+bCraUV3xkdP9/+7cvhMn5A17+fLn04\nZfuOr3g90L06y+XsTALPofKhSN71y4KELRFIgA22vYPWVoEWGEP8Zr7YSg94\neB0+vCUl0r8epgeZcVGcY/ouR+rxC0JczXGaRPIiK+eU2Uv5LJuiPPvmUq12\nmzy5ncNfkeoYhETBLG++Wz84HhPrqZ8I7YrXKJM4WIp0sl8Hx3LjpiYQsA2n\nqkx/+Xqlhy8HwfQLA70JpEI13r92MOV/WuvDNm1qzDhtjvEawzsvgUaUk16E\nEFDnqYO1cJHqUA60fv47x90b3qrs+Sw05YnnCTPgFrsYcQYmJTL+D2Pq8li0\nfcj6\r\n=xiI8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV9rIZNWJ2wcR8fLmuEkLqBVFPBpihZt/pHVuWQpUpYAIgco9lOM5LfjDIhEAWDs6RkFn2YSVQ4yM4HB5vti22xLg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.f181e3bc.0_1595455357031_0.8534447701520231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.346a622a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.346a622a.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Vk4REEZe889O+thEvfzOq1bdvtWX3pbmm54bKydcxwcqRwxpw1TbWyY2EPoyPph3e3WAbx8u5u4hj+DQk7yDoA==","shasum":"edbcb947c42f719ce121679cf6cc7f854c5f5916","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.346a622a.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5ICRA9TVsSAnZWagAA+OwP/iJ75vSnO1VesC70MvOi\nQVtxW97CW9eUHMEnIECo3ANvfmoPiAiuaUlqj9I9kF4dD50e+w4j+ICfQBOL\nggAxhHqT/oZHIUobefVqAezv02I0bcaXpU+ACuc46mVdcjfjDq3rew5/sbfV\ne+ZXwI3E45b9wB7ufyOseHwaMCmgof5P/le4YPLtMv45gr21n3m6Scma5jni\nIuN6XNuerVci7WWozXWjgIc0Voii6OW1bAGwyztuW/8ibPu/NlgV0/Bm9ewx\nBcmldrtafgf4CTpyhtVKWwafgLdDKOELNnVE1b7cht1ZLyoNFqWORhh2858d\nq0hCr/xf9BCfpTfD/UW74dauuCSx3oJogzsXe+jwHB3Z8jeWuK6KKAkOzBcH\nOUyFJrQY4BnYKxRcPaTTm/OF+FCjLum1InSuD7aMO5ZS84Yiank17SCbX18Y\ndvF/r6qw01feUCDqIcquIq/Wgne6GDo+teplXAtRATybfEIHorcaHUgGIU19\nyGlldTnBO7aQdqs8Is1CPj4kGO4aj/V34ALihVdUs2oYZwnP/Z+lKMEc/hGR\nXtPrjJn5frlJ6EHLjbyUB5P4hr0mvXIXUt5AxcKXeEEU/LRjXQ2jo+T5y0ew\n4PW5c3FZ+Ui4njMISloHJcdEuGdEqtq1sDnvZ3iOmaXiWnrxPgzPPlGyzt83\nLdJv\r\n=wjM3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRsG0oTfkWukfzHaY/tenO5xxuZ+rKDpb2oBN/FrL61AiAY7S6q+MK3pJGF0obg3GPvoEUXuCg6zrCx5A+ithjhYA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.346a622a.0_1595461191613_0.3643220800770981"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.c9e8a848.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8/aK+AskZqHh3iZybnzrcmg6UGL4NZOeueTEvjXpAi3K9p68froBG2r59pb10Cu8uj3mNZyF3WZDxxMxvJO31Q==","shasum":"bb456839c698ce8dc257d52e1815a75e3c9cc6ae","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.c9e8a848.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGON7CRA9TVsSAnZWagAAHzEP/isVOOftSKaBqKAYNY+U\n1rW1TMmop3a8GdrRnKBWSynrq0vg9ynirQqd0ewd2lQjFXhn++jUOBgH2o2P\n4ihZP2z8YDQRLXrsoyEUDgEfoTLzXacG7QpNgyJYAQFOaA/QMD1AFg9boGgn\nEJVg90J17Ox1g5vhvs3JJoYl51jbYlqCOWl/hMwZQaWcLGPfLj7k6ZUHO0Za\n92cUM8s4DN2TyxaCfxhfBFR3k0kDuQ7rmkERMFojE0v3owhYhTfNp7m1IQHH\nQ2mDTKj6h5zz8dJo2+/D7p4WriyREuLhKtfrZA0HOCUjXoEiVW0dh7FJwC7V\nn6/P9iS2uUcMHyh34RqyA1OHKk1VFEAJ93UK+O+QwyCPQAV7cBZDeobCjPhV\nIRDtnoxP7IXDOwLHvXLYwe+x9SFCH0BZQ2ZzqCUdQOnBEoRfd9l6L7UY5XSj\nqXJJHw2i8mKcC4wqVCVceXarOoPEyI3Bci54wHqxL4U5Pu8AKyXNfnxW8B+4\nX6PZ7LemHVqC1v7v9+BSXl6StfeAOCOKvVCx7TzefyPP5/ZMK48hVbyDM63C\nomonvk/LWqLU/wMEcQwCVVfFIJsm19IsNEUctv1Lg1273t9sYDavIu+v/6Ln\n5gTyGYa3BoXXyq10AvH7sutfJgNn+NAuC+70kkvr7zNcWXSJXi7cyteAjzxZ\nzu4/\r\n=3/xy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFzf1aPFCiGerf1mNTGf23JxNC+fy6eS3Cuo4iOcGOjdAiBoQMMF20jQD/liKeLEmKGcImgrCn44YNN4OjhG6pd12Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.c9e8a848.0_1595466619291_0.2872210263535644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.718c385c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.718c385c.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hCZs7MZ3iVhjdPJdGRT4WHobHuIpb6+jK4DcvjZrsmE9z4Xt7WEF36CbqJSg0ZQwuaWpeCdPLbzWfRbzjrOICw==","shasum":"af1f43fde3cde5305613849261fb275b7a384d19","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.718c385c.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe2/CRA9TVsSAnZWagAAAOQQAKT1vt+hP4gyCbgnNMDT\nT5muZA969bY8ZTLh0mE1wVwtvF5Zz0FSSBbJwtMF9taXsPxwE0A55fB8hHKW\nL30kT/o9cPy0CCZj/EzaR2KJSf+Guc0NSa8UZWeOar2ab2zyOO8V1FODcuzZ\nmiQ3HHGjD0y1K5SCm7OyNMIxBlqYBxUMnu2OyPMO5z8Tpn2sIxYIjxqEIZ+5\nDQXmI8IF9LIXqbBwcTvR3Z3QLx9bfQN3UXrmgke5Q4CGDX8oBqAXejG0myKu\nPRwKk4tEJ8kOLMpk9Fbfh74nyLXKPB2uuLnwlG55L0d7UAcVFbF8QrkB1eje\nwCBP5IqekHsYbQhiukuRDSvphmgBOBno/y9+8+mF++dEe2W6QRHE58z1o6pn\nUTyZYriHDMXjhRvOquT9FdldtmDZrhI0sCQO5F3+vswUYWZCmi/37B8du3O+\njmPvDn6LVT54IZq31WHsxMu6/HmztQBvNB/RdNtRG8qR6ztumA92bHkj1abJ\nEvejCR1rAQji1V8zK6l6bX0GeBv3p37j6PJUpAEQzXrru/bDT+i+md5sTWnS\njI9uRcW7sahnmM2XSSKcDtRmK4vqlL622BoXs3EMBesd63/bqweU6HBBONl1\nKO5JVQdEEErkp3PEUMs7jVaQddoxPySnt9JKWuqrR9tWdjqGv5UUBFOE4uyX\nYVd/\r\n=rMSx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBfEWi9TDMy3IaBHqAxIyCD8jH/fBgOvnyxh9Org8bfYAiEArvVUVW0P2Ky96ITp6ZEgePrXANE27hopuQeEfKJ/NMk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.718c385c.0_1595534783382_0.22749592886532688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.cd516a27.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-k07NZXC/EMHNflih4wKX2ONLb+MyIF+vsr2o45isYjhlOCyiy0R6QdoYLxdJtLc+PMmAIwzzdbp2Q/zImoS9qw==","shasum":"8c414bc5bf4dc97ef5ae9fddd641b5db5b1e6b9e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.cd516a27.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzI2CRA9TVsSAnZWagAAhscP/A36j4uXNfez4jmhzCPk\n2JxUgjnaR2IlX6OZgRuA5Hgh3SEj3msjxfmkBVZCuyKAsE31Gh7aw58ZvSR5\n+COmADF0WYHBxuT3XbFzS9x87mr9SZq8KGubQVKVaT0cPmfRugMVJgRpq4r2\n2xoLwBqiv0LtlIV7llhS1QuLb0vfb6j9+TTbQgG1+SR8IR+Re+l6ABBT5uPb\nffdAkV57YWCe9jKoqib8Fi3/Rinq9izvEkvgByDYIEl7xXEAiugyBNCGF63i\n+C7AhqEIbr9RlY9Sj6G+kaYhCkgXh3lsd0DfiGixIynQkQF7L5i149vH2szZ\n/2hvfsE8MXPwUv+9YorAf3YWVqDq4yPQQbpYBdTSqF/Aj9U8syVxSiqS+cPx\nAu3olXVo4ihEIgNsPTpI/00Ak70aLA4HhF88bBT9H+AxfIutyamj6LhdYOKd\ndQ1gnX+8DWzHnubKrM2wZtmAwW8EGTQ6fqLoMv8/psKmVroHBk5zFmz6La72\nwDyXil0NXAM/6DDsnS7ySez1lZoH9H9kcT8zdewwHgRyzUJLX6+KtJk+Kxth\ngsd1M08GB/72AvDtvKlfYlcXcMQ4c1UDnnI8T6D+tewZ5NJuc//JaubNKf9f\nAqxWAwWVycrBr+AN4v4uJFhKfb7pVaB1oZGDpn1RYNT2jrclXZXiHY1pQQIx\ndAyG\r\n=5bIZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKe4+sE9NDC5PzBmDTcf4mVdub4N8ADvsDXf1wl4hKwwIgMv0PKmeI8sRZSXxKSQ70GovS3PG+pvXTg6XEhFfHBZ8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.cd516a27.0_1595617845991_0.712103298520373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.1f082191.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1f082191.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eqzCbwUYk+Eys5zcyl6ePiWdE2jW1jsRlXaKrFJ9iar9L0yhdxAKBxWdE9+Pbfijw+IyopNO3GdF8KRAgHkF2w==","shasum":"fef3b5ff1b6c8a1fcba135e5fb3ffbc1f25aa762","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.1f082191.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzNzCRA9TVsSAnZWagAA7HIP/3UCQDrm2Bh3vvsAZqBj\n0ONQIbjruCsX+v0sSbM3wL0r3yDIRRZjCkMS4pl3Ye+UMZSrQGkQFKc22p/Q\n2Gam5E0B917jP+8Ezr51BjP361JbJp5la79XM47OjOZsTKVojGF5ueB6YcBN\nemnWH4LqAxvCh0iZzpsNidNqxWmP9IJcuezRJapwQyWLtEgKWBsaysUoAiVV\nl8NNt8lA4lqZnIv4FtQE8TxMBHCP1i+xGtnKNScYyHR/ekCEJ+coPeFACJIz\n6C4O/2xwAWty/KnoilU38T+VumR13OIiK6KlwEF0Tsmpa8cXcSWz3y1nthzx\nPr655XYJqt47RrTCFU4sjZIGdTRMeVn1GFZ/rf825vm6XTYBbTuYI8Eqyv/b\nCqCWnGqhf5Blth6QQzGumh2u8xp1vlCMhXLDqj+KXXerZqi/IsiABlRKnYwg\nOHQUWyFc1jQF/SgncRPmYtIykI1sCFtNKcZK//rW9urr9cOZNqkkukGUxtJK\ncHCYUy1nMbzLJk82IZTI3ZL50Ah7rY2NYuu91SJUwLMF6Hjq0hkpTngwCPee\nQG4KrXAl41yyYMoSdfaIKxWcE0817YkTGP83Xgztd27KgL7QP684YzXfmoCp\nI9wdjlLx7rs9LwGrj9Xzb3zAjsSWAAjTyICKtSLgGCzIrMsHRstUchBA4dRo\nrfBg\r\n=l3Ho\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPzrrSBeoKIO5kaUOoE92VLPrvWepkTWmnmTLIZNmx3AiB3Kk5tM8KrBWKsOUE/AIxSZE4OYXjH9asXR5rfX5ucOA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.1f082191.0_1595618162897_0.5862807223076887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-evVyojrbOACtlY7u/HrRx0KIcrs/9+TPvPQ767OmOXI58DimN5aPqpd+ofXizrQxHSgMAxraVC66X6z3hSUi3w==","shasum":"97809e474e0993a68bec9d6b4268111bb1118a41","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.ea3e82dc.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzSsCRA9TVsSAnZWagAA9NIP/3c/SMsJYTIUBz9vXWMa\n+7uRQly1Uxa5kDMbLIu9qqw78lIxIq/ann/Wlc0G0T7KL9dL3n0859059JdZ\ntsrwAou83v92bDTWE2YxYFyGzD+gTyp8zO4R3vzQ3tUHyyjhO45ATCvaQbjl\nCSHNaAPekHa2xocnRZMXrKtl8J37dF3i7R88822gdDizAVztNJ1j2H4rGafa\nIIQZC88tLNYRYuIE0brefeEkCyCUr87XYtFvrsRZ89owjU/CD6V+Go1tsqUk\n8S7O+5uMUbthPu1GTXk3V+W3dvF26irwb0wXwjVdSkFpvrzuLZYI1ceQU3pn\nPDIewuHvmOZG/QaBs4u7xZV2DQqdBBpUgZUSvu3xb22QjOJwBZqROPRGdCoH\nBcTO42NdLM9esnC5YCIkeIgk4eY7c7CC1Wu4VTre/4BQvdkFIen5tiKL8aDH\nZdKchvatb52rDCltK3CudFcrI/16YK5kYEwbedrFOxN9vnV3oZuvLFGL4eg2\nXsSXC054Bs/23j3PALnV2ahdbamjFu6ZSQ7ra916BiRH7m2SLy+inm9HUoO5\nGLLkcHhgrpbWg/cGd6c0RAf3yFeDeQt1eXo0ydlCBbpOsheQQ9zPVTc1nlZm\nvnFgcIS6METyA4exdcFp8/bsWwsabVq7lYIsx4C7K+GBiVoK1X6jpBIt2u38\nP7l3\r\n=Ej3o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH18HrE38yc40Obp861bD1oII6HR7uC4z+9pvLiuSG/xAiA8dOgaLUe2Y/j/js0+tiU3uxmsDqCHAxW/BuvlptVY/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-top-app-bar_0.18.0-canary.ea3e82dc.0_1595618475773_0.6002242071142527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.94987b64.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.94987b64.0","@material/top-app-bar":"=8.0.0-canary.5511e0aeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.5511e0aeb.0","@material/elevation":"=8.0.0-canary.5511e0aeb.0","@material/theme":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UgdoBgntyIVNxLKgmOKtJ5uQmuZb0i+olWTMQm0V8AmJl6llqtS6atNEhYvm76BZv4VnNFGUbA/k+zFZKyf6cg==","shasum":"ae77160ab686db047c8ee51d3839bc4e35197713","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.94987b64.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0PzCRA9TVsSAnZWagAAi0YP/0elalb1abez4kZSgYXL\n8lB9LhR52vaeRXRS4POXyGQbuWyaEHLUcdz9RwHyYI/ue6O1R+3AbYccfyaJ\nnUwska+hNNQNX9ZWVRiCiSMfe/aowOEWyHRsIS7vKbQk8CIAQgMpYLOJrg8d\n31/A9vtCZDwbTjtTbO8qlNvNsHSJ87XOaw+/+YuWXscRv9VZEbCVYJ0BPnoG\noNACnxizzam2p2iQyg61M5elElI9dfaUtOG2AMwbQlBkJ43BOiBVZynG0fY6\nBhKaVVl7EfYxm022oU+WXlgXum6UfqmXGB//OFjIUTvuEBz5ZrZVCxNNx0WY\nuejgojGcaXBSzyhKBDfmTXuZertv8gV0CBKFt5/+/gyAr9iz3GEh7YigSDDM\nljxYZpdPEu37PWY10kTX+s+P6SjLV26ZTj8ekdOe95+WOEVH0jXesFyAO3Jy\ntb+pj9MIE3TXR9nisTtIfypYK5+7cndRIUGtIyf7keWL7tXn5aYyOc0E+I5S\n4OyUUyS4h/CWPZnE1CPeIct52NiL9Z0et+uoTHFUfEuLO8Tij5gbWz4z9lX5\nlhEABB4KTZIX1VF6XToXsRDFwGYD8dZwAPzKj4uZVw1qovdFeee61k6homQV\n6iRKDpxeDvgzXnRyApHy7sfnm0tQ1D93O0M5gb/fOpjAbzGPxPL/byGe5qya\noGxf\r\n=Pq5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzSKFoLkz5eZ2HeZRzZtyBwFyNUGwimPDuxYGLCkjhJQIhAO0h7r4xAmXwv23JFMOiC3kiLDieHoPcq63bP2srzjrg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.94987b64.0_1595622386154_0.06808373431262216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/top-app-bar":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.ac405eae1.0","@material/elevation":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-awcIRgdx+9fDSWNB38WnNAtDoEwNmMa51DS8bDzUCSaSsw7N8J91tMkLFGe13m2Yov3iW6yMWtUFFh/dLHR/wQ==","shasum":"a68963079c09d29c7a4122c1a7c8f0daa49a2853","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.ff49b7e2.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVNCRA9TVsSAnZWagAAQhMP/icH6/XIQj/GWkLBArVB\n31PyWtEnhYhbIGNgVVXiQAPZX6jiVBkF3/IT5LbvzS6iDKrzyfatiHqNbxNa\n2oTpCE3hyDsOhEYAW5+FxSFBfWOTJdGWLUPSRWmY8146OTPvC/96xaFYupqd\ncLsXeDBW+R2POIvHkFa9JzNP87KHMUUbob/I4+qj+oroLWhfBe9uL7QQlJgM\n0+MmrMPlQCY7yxLl023oclehtn/ZCro7w8iq5VgWpM/EGeFKLrfwPRYy/jyG\nCDb9fUJBvqON1g2l0WHGv8p7V8mwqDm+UeWrx/JqZkpypY/BtbVzmvW2Z/Fl\na20tlrPHF0/jC4ZZtV/+FqPPE5yJ2DS9NkLP8n6bYs+y96MW0BO/iRls4KCg\nsUxoA6OECniT/NS9/fhrZMIMYpz537bOjmzG8feHdUEr/MMlLoGyhA3AzKjM\nJ7XwtyWTJZSew0jcmyNH+GW+OYuxqAyZM1YqHBATfZ9NFBhvlO054r7DDF59\nPu75VDYpyb9AiZrIq9aru7FYMHK4IAkF0UuxzUfIkXOrjz7w6oUTqL0fk+iX\n5IWSUYDp8wNAXSOsM1nLSXpjJoLmU59PwJ5qKjncKwlYxdnmRe1HO4nMIBti\nX96xOB5fDHjS8EEdNY8I62bGeUi4DeS7ou6U2FctsET6kWftS87qvD65vqlr\nfmtA\r\n=/Rg+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbepOI9k5CFJ6HfSJF2wV9lzxqGEqqGv/yeLp8LyMBOgIgUnIxXpQqb2eB1TZ5fSQ/DmvDCSwLb+7A7NdXSSjv+OQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.ff49b7e2.0_1595876684926_0.10079031067688593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.3d334ccc.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/top-app-bar":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.ac405eae1.0","@material/elevation":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-w8uk36dZYCgnEpnJoL08ELKlCCx/8tg5tXBmh3yTajYnSG0w+XvJdvlF5nCQpZBRaFnzBMPHBZut4S2It426cg==","shasum":"24414e049b682398ebab7e6172e20940cfde6b9c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.3d334ccc.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8NCRA9TVsSAnZWagAAzTIP/03JodIsORCKeG/6NtF4\nOo6bdoCURgEnBEAgZzMahC4P6S7r3177S/5mECoFVs/ChnzBSLy0rtRv6kTe\nQ/ngxhjYAmgjn8D5QSVKfwNUsyoexWIxwgRZi9QV0R/G8jx1xS1bBts36uyj\nHRMAVSouVoTXPsVIdu68ioQjSzRiYqtWK3l7tGEc4rlpelXMvxyQ3yzVIgxc\n29hP1U1FqP7nl6kJw0Hq0g/46Tq+l+ey1P5JwW4h1vSlr/rcYqe/DIyGCMhT\nx9GI81JRbOz6SLPxVfeIiJLlhy75I8eqQwc54y7hq6kEpn844XUjtRdswM4Y\n/jP27vlYn0adYNEJ50wxJeUwTjgmsYOe/W6zH/HntI5mGUKF8/A1Q8GjNNxZ\n6kCzwoX6xxye15YNn9p9jvmOSLQgZNZduyE0H8PrHbtXmf1yYwUI6aNKlE5Z\nyn1qwfdVKOWd4gE/uZftnVJw3RYdqI1iEuUB33lTn8ocqGeVwC79TWjdFnId\ncCBgLSDaqSCMQGcJiqOr0//vF4zWwiMs5hNfvrPiTPI7opqojKh6BifXG0mP\nbyVmVQ/31ptRGEfN2VQgoiYfRlXNH5Tpy52sa/Hjlcy7VWr87SY/L+nDdBzE\n/lKCHRCguXWxQ7b5HIKAzhqDmIU0k8QSpPe2eaucBjU1WjYwgsxAFnaEFpHj\nzbZC\r\n=YI/i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCa7utTWH43FHxphTRlJFvOUWmZW/mVuHZJnhq2EGJs6AIgZhO7tUOPsaXhankrpANFzHmspM5F/XyG9d6oaU5wgws="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.3d334ccc.0_1595952908556_0.057195412851874794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.82ac569e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Cd/zo6r7EtQ8jCo8peiI5HnejkC88sWtwEDUeRKXi8Co7D5NFHnzkCLAfTcuxIrtHRHXbVUlLGKSw94/URIa3w==","shasum":"8e38cd4e29980a7d9b1a972447916f6580fdd45e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.82ac569e.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGMCRA9TVsSAnZWagAASyAP/3RWXoYCrgdmyJRTMA6m\nF8b1kKcmDJC7VZ41t9IpvBTvGpQlrovpbtCfXz27OdjHngqHR6gozwl926Lw\nztHYa2eemu39PrYVgW+5jHo4Tc9MzEPn3HCsQxTwdxbVjXfqpyA8ym5B60lk\nam76LYpRhYuHzG4lcsh3iRlUFJ0RzxKYEsPaaJ6Sp0WmVans4Untbk9QcViv\nh1yeF09TBMAsw+foK2yA3P/mBaiFtyz5ZDzr2rdgJkJ9PLka+JmT1DGF7izP\nkbBB5MgyLnW6Lsr+G9cX6GPyoqhdg1UETxJxCvVOv5EkybL+/S9x/zrzxoMb\n6ZmJt0hLecbLSijbxpciw7PRNX7gT9dTFRsVLSF2VKFU6qsV7vnUXm41A6MP\nhL3wik3+AkyE/ONS0bZH/aYV2WI/jkmEQI3S3Zv0+dBo+SJJlpguKSYQTF9F\nxTO1WX5XD3tgQB6Az4X74QIhNCSQ5BPch+pOtfLfvJZzRY9nBK80YvGmguR5\n80UCiG4tEJE6Ei9+Nl20QuenH5VnwQctfVByj5if56DF3ERfo+1fgQzncEP8\nx3+jKNti+3dWJsbc1NXVSMY8oJ8VmaR7OcqMd6/bKjgrmgPVddh6Wj22CFRe\nwtaTPfBmrfMh8kMY61mlha0nmbbmSa811gJGEWu/PA+d6iaWpdkoj1mQN7Bm\n3Umm\r\n=g1rb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMn4OLFMZ6GjNwAgiPP7atOR5fnDzJd+INxF5rlTT4pgIhAO9JJFWROyoq4vNiiGEqPVrxNaHf9wbEXJIBcDxRFi8Q"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.82ac569e.0_1595961740399_0.3080377514767305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.99df7397.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.99df7397.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-XJ/HW6w9XQ6qrO3OyTw53QoHWWGY8cDZdFD9NLfV9pEjpqkb9NzepuKDhmpOgnE3wyx1slmFxHqnGK4D1sZHvw==","shasum":"36c8ee4237de0fe0c1ba79f8df21209b5ef4953b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.99df7397.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGaCRA9TVsSAnZWagAA0GMP/39R2cNHVnnvmbnIKhb1\n/3sIFq+WuDFEv92K1itkaIq9N2BpqFvg3suaOGsKs0uMGZaQoRwwfPWjDCrC\n1zmXUNNRL5G9hOyks6SC3HUaRVzYGNSO7asY0PAEIyvpt7hqlyhA8RaKSQs5\nUOJIDH2bSbwREyCernKpb+gGEraSzMatX230aO612qOfX4YPmjM1mououQ+t\nTAj6qlhxjHBdBQCFrBx4a6sZ3csmA5H2LAS5vpLSPiWrGWnWUnRXcmA6FiU5\n1Kaekv0AVxAHGnPywMuvt5ryhrreYhX4AQkR7fVtAHE7acAZ8QAMpca1ZN6C\nXQpKhvT+j/G9CkRXmlNb/tGgAl4CKIB+kH9+f5AdFiPeCCFTNwg/fVikQI8V\nDQU1P2+9HgLK/Oy3V8YpMPcLcEUMf9XTrD/tue/+25ObQADE5Lw6dAugJLox\nUwOfG/IJpCEXDj3DYbw6i4FUPetJW2+0xzOrI41qF58DRwrvo7sd7Ci/sgax\nwEHIywqosrQg9o9braDQlm7aGiz0yhDaixvy/Q/abDCHRbis91R7E7LWhV/1\nU64GeSHNS/fT08nm/fzr3GhN472RNvK9NzuQM6u9VvtrSfM1+FPn5+/cyj5k\nIelS7fV91AaHUVBiv4s+kaWJ0UYcrmKvp/EYbfeHX9Jzi5Zotet8Ve9/PYD4\nid/O\r\n=M/ht\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjYK8fRx32czWxSC6gMR8UaroatSYHRb5xXEQkI6J6PAiEA+MJ8QMkFili9ExjDm5rsQwuE2tZCFJF4S1ywToYwZvw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.99df7397.0_1595990425961_0.5958870050845957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.45493e05.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45493e05.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aS0yqluoMqfz8ZSR79RCNPQe9G2YCJ84N5soFMpmKicl6pJ4R6Z+RzyDlcJawcxF/Kj03cbgDjq24w25lAJp6A==","shasum":"628e815c7a93400c596853b5c20d33506df424c8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.45493e05.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7wCRA9TVsSAnZWagAAAPMQAJU7VN2XrCmDkonzUtD7\nVwzOjIe/Ea0oSSHkjqUDN4acsuI3egXaFLQHTC7+yyEJ/ym5sObf1HKPSKGh\nD9nGPzPQSxbik6vW1srdYrUuFB6RDODrQ7vSB85HWbgGZ+LdqoKVKArRcXvz\nJAimL92Kwoh6wBbRQ1GaYlRuOU/A77eWWE2asTwhe0I0WB1SlWGtt6TDJfNz\noSc3P2C47lstaPjLZMb6s3C4QnhSBj3SVTMoMBF1NrpLKs7PeMuPa+LIzCjN\nzaNkeiLElZOuPWOj/CnenlYE2FvtzmR7SySoq49CPluy1BNl+sE9av9VWgff\nVFSCXthNl5iqDGcHQat+6kvn46cvnhXvEuXuK3hEtNjjc5Qp6ae3xfZoVumc\nkUSdX0UbZCjA5U7PJrEuCSB4jRViZfN2o9NMCc1PqquV+OYaFyXaStbZePMz\nMuWADR7Nekg6woSd6L1AS5VakpRiEO1SkyNFvv7ZGgsgtMcwsCClAFbLwnTY\n4F+WzolbIAi+yXy/ZAhLzsJkPeHGpbBg1GLsVKiNXSeMIwT7FN5bwKglD0oG\n6vl/p8CUcZ/CbKQc+Zd3xT8zSy6q0juyLF5g8BTFU0j67FX3Z3hiMlUPWfRl\n7div7UMAoB/UOUqKM21s75PorBMWa6xUxU743ur8onOecnmBOzWeeIOadGT2\nQCmo\r\n=teYT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDArbmGkEYWb17G2z2X7ZclPCYo5fFtPMH1zP0glj80mwIhAKXhWKJoDGOcZzZYCp2JbXD1nmhTmDpk3j+aN5DzO6QU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.45493e05.0_1596042992293_0.5973760071708172"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BpVHwlGAoYl0DNfb5xPoIFmArvZ5Twr6Mq6PyRUZHUyiRyz2Gz0kC3QpSGIAePCgn9H0IR2Uz7bPxy2apULzug==","shasum":"e47a91bb22957ab92bc108fff600fd37ea578409","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.f2ab0a95.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAWCRA9TVsSAnZWagAA6cYP/3zfMKaEos+yqrcu6n2e\n4eTh5CoHhCoBF/SgnU9MGN1DZ6Y7AsvbyVKAAvaBFPB1aIZ5R4AIuzDU3Z2U\nE8NBVdAAp63XAF0iMRv6XljVvLv1pJMraNuR4zHNnf/DH+vXX00fug2+Eoop\niSnARWYmmZ0GZJFWNcFPCNYflTngXgRuliD3KAVgWTSxogW/1rRyLogElD+E\ndSqp+cFNleQ6CZuM3WYGx5EgEgSEEPWV1UXrWum4m8txMdYzeIjVcbmbbE4Y\nyJeKfLqsJYLl5r0u9+RBga67h0yPxUNsWpaAhcwjza04AzG1olV7SDap+wgL\neU3lZIvoooQy3dzK5UB99A36ss423+HYqV3ph/PmbyMIwkdjC9CGFn89ebOv\ndW0ESw79V4Nrc6bQqi78hkX4o0X46424Z7ptn7Fage0F9AeSgCUGjxM5mcW2\nBZcANwEGBpTjzM1fEsf+vJCt7VoE5foxQeFCtaBUSqSSESSM4hGDVo67c0ZR\n5djimEhk/fH3vBHqeIRUyudFyP9xE2r9p4xWYttGmxQDxriH3ou734jX07Is\nzM6N4XFS3TtFRxhs4nFL5YphS6CBbz2bD+aS0jhG1E+fV1UBSyRDZaU6EuYu\nVcU+UF3lnUlMVfFKw75/f37FTuaQtnuCx0Q9o5aHPmRstFAK1oyYlHbr9o62\nU2+M\r\n=UEwC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdM+hoM5uFeLdTwA0ekLzLAkHNmLXym07yHfDHmOMg/AiAdbLMIObw6viJjuL0mTJzLoi6wzNxFd0t4ljgSmOx+GA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.f2ab0a95.0_1596043285854_0.700458308832282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.45f9eddc.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vAmEchQwW9YqYhsww49YSonCV3cODn8WArLcyhqtTo5QOS5ZSGj9WsLGVAO+NnumPRSRUvzlmIeKARu/PRl3dw==","shasum":"40b6853f473bc46c32e2197bbfe346364253d522","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.45f9eddc.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpYCRA9TVsSAnZWagAAz1gQAJ+6vkc1xOvVqk707ED4\nT0dz/AndDrZ1hsmbkA65MVqIjuVVuXMFeTaVmW0qkLnqXAmlRvrNaXYu9qjq\nb3JPMkhASNXSWx9KmUDGv2bIzVRf2psanCXZPprTq/8M5mhzWGWmLwgBSUwf\nBx6xDGsAa30eklaJPCqJ8Um+JNxunurOn/aT6QPsnqSPg/kjIItLJqnLYtTf\nR9aclyMHMfK29+HyZ52ba+tjHFulZTvELYRM8nhnXcGVJ9MUcsXQ1tVTFycZ\nfHKL9zlmCsMiNTxu707Gi+2Ew7TBu7cE7iq82936/xeNWi5zetCl/MwJ0nTU\nleH4Ye5HIxoIjIaiXTbirmWYhPgcAB3Yk8LjhGjO8mumwL4jxrjcqJEXMIl9\nTIPDcK2KxznxXVEukV2PYj31qu4/NCWqT4vVT2LkZ+1GvkL9rSoC7zx2KonS\nrwAOVl677kC6fWVCdExG04QEZRFcF/abzwTRwbY7UAnGjqVs5JShXUmf1xkr\nLnH6JP0JGP87hpBG7+FbZjqrdlmQ72XWIY+gYkLJaSmyB+IHxTqxCVg5U1dY\n4U6zxHkM1ljWcQCvLRD0qc3iJPGyCuTwxIFymGgWKA+gn2jZMh6wiNBVZZnV\nvEcfBYW5rAv1aYE28TU5jo1jOSMfuh8GF958+pegyEZRvWMWWhk1jE7joot1\nOpCQ\r\n=HnNP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUlhcqNKKkzHVHwxaQHcRVNvKChVW+OVeSaX16l5kYmAiAz7tJU/P7G6EZvrsJ0qJoA5yrxDm/P4oLgW1XWVQwzpw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.45f9eddc.0_1596070488472_0.3353295500187725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.b64663ea.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GAmrpXEtG57SRvu+RvfvVKK9k5wLX3vkH0Ciw/WYYxcvBcfejycDf77WeB1mOR3EFHp2Mw5EKCeEsNt+evJv9A==","shasum":"043c77da9759cee23519229953731b4b214d99ce","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.b64663ea.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwawCRA9TVsSAnZWagAAUKAQAKFqzVLCOJo1+eRzYRQ7\nm9AJLZBroaYEhvg8GPfqqPe8kumbnbjwC2SM2mmp6U9uK/NKjUxm1bpOxPz2\nQNRfXTBMhsNdybSf+5DX2uhDcob7gd4SRrEf3XoPk0wEnmjd6tGJJhn33Y+J\nIoFOroDZlMGvTlRjhWht54zXQi9ppt99wR0/Ln+OzzWSi+Cnv6J4qO9Gg2Fw\nQatSHkTEbU8dBaPtOxBRcoUEcvVpYLSstIlFz/ReV9JDSZTrM/0oj93UpjpX\nn+yHCVIRV/INfSEeYFzs4zRUrRK8RDhhK+WE+Qlr1I2vw3Q67LCcak9lGhF4\n2ZkRNQ9QhFFkZISZ6oO9ntG5q/EkBSVi/LqV38SLWaHlP8YkwreBt9ai32E/\nVoyTFW02PTTALx9v1X9o0W42Fdv3UgXL/ftn9Awq6UPkIHjXcNzb57fz7z32\nvj5l96lILnfri7A37soMpqEa3qDHh8mT545r1zOVaacJIeyX1hTf30MctVUD\nMqc+kThQK3IsDkNLHUY65OIZ8xuUY6swBunKt5a2tEjI14f4Ydf6Y1dshCku\nMFL3TBgkXBUF30CkzlljxwXGOh3jE1UEW4M7n5cssgNFZGp28uTEXr3Oc5pF\nMddE2U99xitHpeg5NCgpkkc95uAwjf+IS8uUeftqckRmN80P6oXVhHsD8X4K\nuTF0\r\n=I/iU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9h6emfR6pQ9RvixFyZYkyejVNnJRVGO8XUpV1YftosQIhAIEtzOZV2Fz53G5ievwaPCYaUritxD3FvoHPwfV2qNQ6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.b64663ea.0_1596130991986_0.19851288730173033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zMxP3fk5A6N9QPh+IP30KuVBolbXZjoejOFa0YYzz3rIsf3MsjfpJ/SgRE63+ZNYsqGIlIcnkW+SpWTtol6bJA==","shasum":"d906e15ab38af2d0139f8accc41d3ebfc100dc18","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXFCRA9TVsSAnZWagAAvNoP/iCanhAJVSBkYNzwFGZ3\ngi3Cr71uiJrye1V3AYxI8xw98nnCPClv1gItj8nM9ZUYV1mbcIpQj4BoW7NI\nws526Vu3JXeMn4Ikh2Bq0dYgRTdAqV7r1Lw26W964THUOi4F9Ylmo+ETxSjx\nF0cgGaV0M3YY5kITB/5XTiR7lDqY+nbrPl4bRp2lRmzsGQO+Asd+7nMdebi/\n8n/V9RwaEuySkB+As7jogNucmx/WM1Yc7B5nThHE3si7jPnavq/ja2QC/yXc\nJRRHeKZzXcluZD5QMHkK/Wx4oyczeNb0o/vU4YFGdnMuuZWLt+A+rJRcFDKe\njlwuT/5j///+H22gCCt3v5OmXT1VyZtqH0/TYweDiXKbLslu5F8feIwdH4XE\n3X+2lWnW0wXQkpw/QRwRChIh/E1RRZo8L1CQ2iO8afPdjU5yy/WLEThhFJe4\nqHkOqSSEhHhpFfWsmXGLgV895xYg4SKVXN7tsUCddB7KAi9/06fwVMZcA5JI\n1LhMgz4/MEbPulVWspUrjPJ+9tFL3xEsBBCmfjqxv+EIh8AFTXzDnI77R9mB\nvmhkjrHaFDxHLmuOHVopj/vqoXbwUyxVtBmpA59mJAyeUnUYLi+vvJYf81Bx\nSVwe+IIOsxd6V+T6rJv+A0skQOwY+5ua0m6fTg9tB49zoJSJGf/55mOYR3zV\nPZgc\r\n=LjGg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG0PhEtS5SDHzJjS3I9Gsyd+nBOZDTkOlk7Mr+1S7nQ2AiA5TpOevZR29NjgA9R8EB82weIgyiucBoAZ1Oww/jOYDQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.9a1a4d2d.0_1596143044866_0.6524098967535015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.887c2848.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.887c2848.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4Fup58A0wu5DClqhjAEm51vmwi0qIwMKsLqpJnt8IH6draTs4B1NKzrYF1BlIhrvyyjNUxtPWQGK/QqVJx5nLQ==","shasum":"3d41a3f8072b201a2c30f9c4b8a41eea722e9e60","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.887c2848.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QrCRA9TVsSAnZWagAAf6kQAJdWwSEaEsj5PJlgO04J\ny7HgbawpyEHQOerx3WkC74iTIK4ngVs6mJlW02sdsX7Z/GhIZc0vFxhk0HIC\nFGEboDIsR4x5AUtZsAw5JMN4ZWTHwFafTWNndnvvttxfJ58+Fl17jMxLqBRa\nJVyJOsMOhpTNwKnLkYsLRDxM7zC1x0j0lez6xL2hzpl+nt5p/lzB2FdnTOXJ\nPacrw7ixpZtQ/L+5g9XNpgIJYDG9f6eDJ2RgN81cOhOvlPrJCe3SQlBc2ybg\nlLIoY+RLI7oq0d0MlL7uRIQ5lfrKvUH/zu8u6oKNCwEpNLl9iLTs/4st3zbL\nDFZ/fpaL8khxdkXQZh0TAjmGD+J5ItPeLa5GO3xadqIcvoWu7ZvLtRI/U3E0\n3SxWwe3PO0Dh7CeJL56Qvb39gnvAttveYy6lEoteDyXfN7GVSr2BUr7QTXQ/\n8QUwHlpTR7H21AX/QfVY1fQQNULCgzBdLDPnseNX6Dae7iOuDh2TsngUVkYf\n1cFr1zTMOkpmtmHXqY5H2dkOSG2szSC9wqpzehiume/SUSM3QJZBlDRosnMb\nl4hQt8h2hfxJcHBTcLI/96kJFCAchPkwLAUFhKa7WrakYQX2HuEXv4rShRSc\nmbJoCdl/IWOs3UwXm9EuM3Wv0XouCnCuDgNECwjdC4ZPOTbckFX3cqRE865L\nAmEC\r\n=JlfV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLhipr8WzwRCrLobSq7+ZBpxaZ/u+y2S/Zsw299GaD3AiAtSIlNcOdG2SA0GPdnzWrFzfk9/nsmmY1aNWavKtmtEg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.887c2848.0_1596146730830_0.22305492517131253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.354eb695.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.354eb695.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NKX7qszVTD3zPF5oX2DHxSHR1pdyHH91JxNTAnvCDmqSko3aqSX17bWN56T+oCAJMVC74GSC2klHxu9Gz8pG9A==","shasum":"a252bc44dfe394a12c546f68ec6d6babdb692f15","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.354eb695.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI158CRA9TVsSAnZWagAA3xgP/35+ZbgLgHSAKY8KEKQ7\nL4gmouS5xucr3TL0HIe4zF1jI8ESKHVBRSXoSeSSLsqDwiIdoJhijBuKem+Y\nyl0vv8h4hlwwRMQgX+IQ6upmWuYftZQk9lvkJUipDroMjJ7GTjrO4o/2Bt9Z\n/G8hyWccjGFQiWkHxiPfj4ghSABAjbPMU1ZpjJXQlp6ToKkYoLIxfTgDzylY\nOw1fGy5Fy0bQ32AaQk43F2KjRAOKxu9g36p4BZGrSA+Bv5Ca9crliWuL9fm7\nGSgZvhPO+l8GCJAvcFNUPuHe42eFd6Or1OcESxSNeu/ZqrHMcFlAWXLLfxso\nCZmqcnGHeV2zImv6Y+bdMwTvc82X2SVOE1XJH9BOb8QG5CkJzN7MmxtrNPZo\nzzNpA7/hHj51YHcDIyDxaeg7X2HNE6UOvEUT+wi0OSsmlOS7XuT+3Ul+7FzB\n/nKlthxY6VgLzYqV5HaI5lP9MX0Jr/56VZPEt0IcMoRHvRhpD1TqU4eNlJrf\npvJiZNdH4ktDq2wdSv5UGXK/dD4ioBKzDCFHz7e79lEE0myMNcV9OGWibLSB\nGyLzSyM29ozpxSsSAO1q9KrK13GtVRdu92QQf6XoBNkRMCdSgSRObW41VJod\n4LPEchwqF/vR1an0mulYzi4VdYs4Gsf4l9lR5J/Y/9/4co+RDb1FGh4SeZMr\nsVSi\r\n=fmmm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNDfaEPmBmEF571NcEbVsQprCvuyNjBtekp6UNcRJ/pgIhANxSOiZQRP0zI880yNvrDosGbxXUwUVxPhs8jbosU+MQ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.354eb695.0_1596153467632_0.9202832549153885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.7beb236c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-j2AI0wPZl+zf1x1PF9C38bR3VbGIoj8pOyBBoaNPGfXom/A1PJtSGfVZPFssrcpAaYR+fWLvJzU4tzAogtX2lQ==","shasum":"a069978a7b1a56c30e0567b905578a6d230c520e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.7beb236c.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFeLCRA9TVsSAnZWagAAT/wQAJP04MqxnZCZghhB7ANb\np/ZHEHLYF639QM1o8UlxvmYMw6q8md/sXMHoHRekxV5Yidp5mMRCIsls4F2r\nzG2hvlCfvYOFMai3TsgEH1D+nSFddr+oMv0DWqDu8nzhP0dWkZbHJz8KG7Kt\nR+BuwovJoI8D0e2a6bUUTFe39QRkH0Gib9WW5O3ST13SrYEoH3UCQkFamtJ7\nIxrcFvV/aBUriov1ZMIzIpcQRUS+SeTfPDPRt4oS+rNNUcL5JRhqRluBjlhV\nNbKtWOt32PTW02LTlOnALZToBuY1h3796clwHtoo00TGgOFkra4QswqrW5sa\n3yy0K+X9oJPD5OJPIIzQhLKG/I38ZoIA2O/RJfmTjwClu3SvsZMW2n8Acad0\nsv90dIS8K1WJm0f3AxofGTZ7wY43D4H5rxwj2uMKYKwdRG1OgQSHi1mFtAP9\nSajcbCYhD45qOAts18/vOSp41fssghgEkF4IUpS763rJWIgy/Gs3x0Sg3Url\nosdq+/gFEGG1DBm34MYORK9FQJdMEijLrYHBvIyEKS5YAlzNrtvVcGhteGFr\nmvv3QyAPNw9SfcZvZ/UFsBJgpaL/FQs1eMfXKKtQCYAaQ3M64c6EpVmmsTdJ\nv8YuUXKZXe15z6v+fNgtjRD/kcCRF+Y4Spyb6SWE0t5D8FjjtRnoB7eIs9MT\nKbGq\r\n=I/eO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQComT4RB8T8Cyja2EqEyk1D2GXLPsmKdhYG6W2hS4xOnwIgBaJh+CJW/GVKvEgqtDZ1HYoWDTwW9sEEBX/AJygx7YU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.7beb236c.0_1596217227009_0.6740514503518373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.c44acc0c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/E48eysKyDnQ941qWisHhiGQDExQ9xisHo2xJk0fW9cUgBpYYWxbTcE82xvZYe897uaw+KD87WKd9Vz1vkoRHw==","shasum":"e7e6d467fd4c9a627ee7d341c5808d666e89440f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.c44acc0c.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjmCRA9TVsSAnZWagAApcAP+wXsApKz5D6gtmhzt4nO\nsvG/ouqlPsBPVpaDPap0PEQMFPTAAQD4Gn6XlvXIpgRjEwIXurpiLaKm+ezk\nS99NaQGNBzmCZ1Enhm0FheW3qR28yOyyUgqntAyD8e4zGyIzoFrULq4wn1BW\nrNnVCZp24vUcORpg16zUGQcJUnaJXGHWU4hl4Gcs9tXEP8tHtGZqUaqbVvuQ\nM8vaxcC9/6J76d+fV546sjE8gGifGbKpzrxIwTz0HpkP0zSbLHEpmV+/u+6U\naXu/XQJ1QNpRgVrKe1mc8LzeklHdS89Ge2icmQqsnBNQKaLguazANHe4Jrmt\nlCl0GR8uhQn+trzQpBF4QzilHopX1d1WF+c/1F/JOaztHPxMtWRXFHz3AyMu\nO+khLJs7JNeBBqwcJCMkfHCr3q3YGd7fjuNnbJMZTaBO0l58LA9tp83fThU6\njtrkZP9IMTRgypcU95K8J4mc2wH944EmORFMERJabxdeOi48nZYo8F8R/G+8\nyLDPghuz+xVyjvauvcnB34hndq1ioNoFI/qjfm6cXsc3xTNxbwaQ5r5yz93I\nQwSeSDsDCG/2cWPJr/AbdHZ7h8+6Srol2f4lATv1V+rTCRBw/TJ+WDL8+sof\nkOuWZJcix/7ZnRU0zZUG3yDo/4gdlRDxSd1iY32DQWPVxLfqhxGph+LP5fsj\nZ9Sk\r\n=yRo1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOPl7Um0F9zLKQmlCC80CKlSs5YQ0p0YwtvU0S0j7tJAiEAws27dws0dX6+0RIuip4sJkSU7CUY/gUZ3DJ4JbziZVQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.c44acc0c.0_1596229861824_0.16290013015388283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.779853ff.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.779853ff.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zV723a8QfHJLxh+jG+If3EPc4OM4MkP67MIzi95CoK6baSqIA6F3D7hjxLtYltlRDytRrhh19rTiDPxOa3HEPg==","shasum":"0feb9267fed6b52d84d96b87e077f351793473b7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.779853ff.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgCCRA9TVsSAnZWagAAA6oP/irSSuiQs5j3RZ9tIFLR\n2GPOfkyhaI4uS47GlQIxgKkd3GBhuRiGvtYtbUo8qKCLjPimmo0uOJkGi39K\nk6yE0CpxxAhHJPrHBSyfE529s5p/RRkw9LRSJezzEHjhTxw7PQcxYAuUnZ+H\nWiuoViAHllxeG550qzTFQx/X/s3RZ4MOHaPdkhG/KhDtEVLKhQwDF3GX/X3W\npNF9TkZq4EMDbvKexKbLZAoa0EA2DtC7bR0CSUdPxmXFg6VdbSFq+ckh1FH1\ngQW7LXFgxJxjMphNT2ZcqwGZGcnjYAq5tu30Gzb5oXIbBnZVvG2JFE0+OIf2\n+guiFiuu8zQcU6gpUcruVbKsmYcx1pEfM83DNmxrWW0RFly6WUrroSxAmQOM\nnDJ8SSdavvIfDBOTl8dSg6OCacGqxGgERIV47URQrWV5Y7dfLDyM01PCP/wv\nnrUwb0kpnNzuLza0zNDQaM0mD0DhbWIlJU5sFq5OZ2BlZwRNm2XCbPB21XtX\nb9tK208Wg+0aLltmYv1Bw5mblwfoYmf6Dsa+aSXEwhqg3ZTxGK4+df6HQCNo\nLYYuctVFjMxt3RWPss57e7Abj22iZhK25gNeTFqh27en2ZzucT7k8wugW0ml\nGpMZHdrl/XTdCSyRDpWjg8YVsggTyI8l31PzX+7y71a/St/+eUjvnolf5eLl\n2DEh\r\n=BD4U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFb9/t5MN6amDDBXHA0OVJhkfaImNLvNASimRV3RUegdAiAP+Cllw2cI4jM/T9rb8PrKl7L5bPZMyYxiC0+7egIMDA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.779853ff.0_1596475394172_0.5752756397492509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.8aaf270b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nRpBq4NZOWP/VTQ5juoXbFcaO67GkclukoM3JPZqD+ftrz/HXWQ/ss2rtGTG67diSNMH7puP7BGksA8+W02Yuw==","shasum":"c8e02633eb2aea41a636ca6254fa0f1be9198582","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.8aaf270b.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFolCRA9TVsSAnZWagAAyEwP+wa2EA3i/r5tnAy6gbLm\nYEPC2g+p4EAfSSIsglsG+Po6HJoFlggZM2xe/QFzMUxSE0CR+FyjIbbJxwQd\ngCvu3op5pu2Dtbs6WbwB5SZGIUXwtx17JPM4Zi2svUprPrHq3RTnd+QqF2zS\nvUbMTL13+5ln9uAgugtb6Z2nIX7MF3SkFD+XnOxC44YfYDUpXAXIK0UamNXm\nG3O0RWygRzaIhdPNJ0N1ATTyoYay88dt1zTJw1qDky2vSFG8rO7JO6QqGwY9\nYthdbr2R6d9n11LmevMUSqhj/QIpViYvgH27Yuz3Btfttq1j9KMBwl1yVuKo\n7IuRh1WHZPgRJwOJXMnU15S/jE/fAweurYqV1hTYNzI0SCV4zYXfyQBYziH3\nLlVIVTbIk/gc/ud142CsK4CRkfXCG0LnmU8EIVACI47st2boQleRwzDoJnMO\nrjPH967FGTSbCr3VbJ9TIrQSAt5zugPMMmGaIinbGqihDMahFqZA71YGae5d\nGnsrQFD7C5UzMH5bBYkfXwPZ6vaak1tyWgkCGeKRPp9Pm4T+azQ1ezB4Gtx7\nsLPt7myTKwt5MaZeDBM9aXmidVxJouffogA1dbnvFnAEI6RyoBEDGMvvCovx\neZdIThe588F2b22BFeEBnRC+5EOwf3BmZhhD/JaT9TNb/tjrbVtqNrNDWozY\nDJyb\r\n=QzA7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIMMdm6vF1SCDKH+7981r+KIKRcLxxTBAsnFE5rCCQSAiBaZhNg0/+Uy00mmUxzA7b6Vh/z+TGvj9IC82iPIPz5Yw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.8aaf270b.0_1596480037210_0.09817776037964498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.5cde9f12.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/top-app-bar":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.5903d39af.0","@material/elevation":"=8.0.0-canary.5903d39af.0","@material/theme":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6cw/woaGuz+aFyyKwxqO09e3wXF2VafcL1GBuVzQZC7sOGGCugVGPqqY6ae7yWR332Lvw2TGN22iF5Xv2TQBYg==","shasum":"8e25d2ca180e8671a62a8e2c332da7c1bd805648","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.5cde9f12.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7rCRA9TVsSAnZWagAASREQAKOG/MzuV4fPQu579wfe\nR5aU6AufJE7zrwl3vIghoitESCDtu69HmMPcIo0qMB/NNEQ6nLYXeSSTxILe\nN50BnFtjeJOtYoFsdjluwC0PyITdDfXEDQfk5Xoz0tTCHq/5diR+qicOkWhG\n6ApiAlz7TqO+nPyag7d+Vzf1H8QiHI0wWb1WMPXKoept3330+/wFEa0gNtQd\nlVqSBzNhAM0QULFed8DDK5T0fR/d5Iv0OxCkZ6sWxUXWyQWsiFdNRY/+OSkH\nabNef3HXXLuvsa3GmMRode5vOIkVsYfSv5EUIOfHqUjMMEIMEF1wEZlrPmSq\n/7I73FoGNESa0AijIpOSkQ+EXWdAxuEdmlZirQaEtGSloBpsjNQnwMQAcKcM\nsSsBxu5aX7bLPQQU8tR/YlbV5E/JZYL3JA7XMe9Jfay4eJFVhSl0DFXriOu8\nOw7tkk8hdcmvuE2l9XHg9aZcYnggUjjw979t9sCOXGvcw7QjlK7cNKn7TV/h\nH9te3mI/uLBbaQDBAsOy4p0IGo8b7eIuOtG7z5KK6DQKDPiRLJD4sQMlpn1O\nejFFAKAbBG6czLYZZiHRjjX/sXFj12gMeeB18P7MOlF5T7bOuHXsXtBLNFAb\nKn6j54pS60w9IiTOc36YV22UgqD66hfVo5+gRGko7kziHFlnvyJ68ieIUE4Z\nJC00\r\n=cv8s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHq0GVax6MhS5l7gGMQ7qN2g/Q+SQT7FB5wA5DHLaheWAiAee6t9A9EmqqGQWTX0bDd0c5BRTG5lgiZHFKHZE/Gqyg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.5cde9f12.0_1596481258981_0.5651350080720954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.1607ec53.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SipE3zrs2TKMrd0M47jnRG+4+7krNPlhRCbZcn2/2jQtD71wSTai+tbbWFzkNRlsSk4gqsopRQPqgIz5ECbn4A==","shasum":"35be74b3675c6e6683f16039bb42d55cfbe141d5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.1607ec53.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmbCRA9TVsSAnZWagAAEkcP/3+7bCSkKwNcB74Cdrts\njJRTBXH1albEvJqQyqYjjea4eO8XSwVhISZniNTZTUWG5hmErjKbWMfljrOP\nAbnyzsopZ1DKHBRO5sELfog4D1GEO7ib8D3hzhuK8xYUnb8aDtw88oOrP1Qx\nJPVr7HsIpKZ7tNwiUGxzJd+YYBR7ESIV4lCmN+dh6175+Kag4HvSEQHpTOqz\nN3rXWqtG/p37RhZgV5oH1IB+pssSDAaqAyEXxDT0hTekUEFqSxpz+VuASdJS\n2M/rVRpdbUlwkyLoBfWWP7bn64uEYtLnL945roV9/g9nOpO8mzwAyFf/5yEm\nMvq3i1mBxj0vGb1hc/Bfe3AWTAbUivSvcpQkR68QJbtft7Wunx14qyXnQVRZ\ns/44BiUNmv+NSBSJI5/dByyWkSZnlz6T5OpUadRIFLLf2BpQEM5NsRTul4ZV\n1zXClWIauJgUGq8QZSzlMomDoapfQXLt7fhoLqfEeFPhvAE5eH7UZ/RnKgo+\nRN2+cmQar704tzYXe3yV3E8karuNdj/PwyWcktLHqQdoSTN1ekWNgKG83fQE\nbcRvR1QWDSflBsoEP2JmQ3Kb99eXcGgok+E3fLXv8bxzI2wurhlbAxovPEsX\nHU/KssKOGxDDNz58GxclLy5iCeL6X5EeaKXysm4uGyUvj+LZAe9VY8TIjtzE\niFYV\r\n=uMRd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsAvzxC93klA5hhPASl3mcZEmJ24CMxGbVwEdfARjxtQIgD2/pn8gRv08W6EWbJtPruTZKbvuGu3MCbKHv+caqwxs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.1607ec53.0_1596483995177_0.6523195156584285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.678b30e3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ENJ2tMw7d0Q/ibyhg4edyBbRAUdvzR6AwOp2mq8Xb5+RvXg33G411rmn6tvhCyxambz4ZlqwRVBveRr/OBf6ZA==","shasum":"47ddf2e99fe5d244aaf5ba8c984cfe3fe6309ab5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.678b30e3.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqBCRA9TVsSAnZWagAAbDwP/2GpRt7D5kABlAWu6Qlu\nzkMwb5SxZBqslQugo2djHOwMDbcB3Ju5NDym5/I97Xz2lvPJAvSWWLu5FYQr\nLsuHTVZ/6b7T1JfjrywXBF/hH304bzec0qZb2F2La5AlIpq6b1lwfdp7vfby\n2OJWpro7ZbfCvByv1pkq/QCb9Z/URcoGnxwUTOWaSLuh4cnolg/LgluRwFe8\nTAsc/XrnAi+1YSGq5cJzo4N10CCFldNF+uLh3RskK2X5kRo9na+V284Dtrqm\nyz4h6gp3FXc9YYCEAwXsRz+QE5SKFKWgVN/4wh9k0zSMYdwUzrMm62Dkimh2\nDhnRZtwSTw3DcGVqbusbNy/HgkpmWahBI//PIWu2mRpwDIt+q8jAnreF7A0h\nJPzluOSWs96cBjDq+tqx9/dZwpdL3R02lLnV6AcAywnho8AoETbqKpAW7meJ\n1Rkb6x9ppE3kv70VPd9ZKsfUhxchOf6IOxPhLaTsjZij/0m1YtRlbCrKynkr\nSb0JOHnIx8+x6syBqkAcJ3X5+rfRoAcGBXZIBWji/9WOaG11hmU8yXf4BxC4\nBAlTBXINRJD5l/4/fgiY7W8rEi6PI1SesK1wbyhvUOK5p6PWTrCQ7Euy/NK4\nnVlqYlcxqxqWC929E9SH7bX9S851QMC7ITAfaXsgvW1noN+wie1hXe8i1hfa\njhCJ\r\n=zSSR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGB4LozHVNuupT875KHfY/ZpVE7pbR7exGo1pIns/N42AiEArNzs/Er8JTRpMGev2UyXzZYZ0wM/XKWdy/NUOEiyKlQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.678b30e3.0_1596484225553_0.9628803786945226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0-canary.21c55569.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.21c55569.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zmeSuHu0Xdo7cnaHUsz15L+lYQhcgu+jcQoicvbxFhrxb/rmRtia26bOMW4KF18+Ro4RcohvIIcCV1JUGfy/dQ==","shasum":"27708fd80a594fa38aefd394c5aa3186bc853a76","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0-canary.21c55569.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGvuCRA9TVsSAnZWagAA4VcQAIP61nZTwArbITGZAQga\nspzXdoGANp20xGg0A1kd0uwG/r5B2UxQAp1zR4XBb5gykixRWCVSWpxfLIRH\nXywpZd/ZsBni7z3wzkIVHwSj4N2Z190Aet++M9/20JQj7/9QD/Yu164jGtnN\neOkh+tcdm6TVQovhWKibgtqRnWLmR7eiD+zRbJO4jxygpf6MxTvUYoTkEgqb\n6hODcT+pHcmUvvAEJpXyWBlgXQu8/vREKSEKDFId09qfbaW5H+WtNpllY0yq\n25TpRi7pRnqXBBiTuOA28wkWFJ1viao7gshVd31okW/ca03QQr44qG4qxs/S\ngcKYexQxhMePDEOvhq3T/QrDmXiu8t29J99/9pvoQk4pJahBlPuPFqOcuDW6\nEGofTboX8vRB5/GODy1tZOn3F3c4ToQ/UR+U6AyJNpqW+8akzibgKWIyg8Yd\nEl5mHX1CphFU1953SZKPyO3+iL01TO7Sz+dxo+5vkD/rrd2WGOvz2Sn2Ysmn\nYRmTShHvicn3u/kEPHX3wfauTIwgDmkglYRxWqKMEm1gwHT/qAjSbqVLRd0y\ndb7MzdtSpYJkUkAIRBsssL9qHO8/Gp/1kGvkVysCNBTDGX6KLt0BWX2KWjTO\nRUj+gA3dGIjbQF5cnttgtkS396nTPMluldGTVUsuXtn2cG89kGsuDqmqz13l\nL8Xc\r\n=vXJa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUoGmBmMSCkusTQSMY1GsY/nTfm0XVeIjyOt7/KimWJAIhALyIDv8ioDbLlZaJKSfh/8sqCuOXPsixq+KtwbwmKccT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0-canary.21c55569.0_1596484590433_0.7498606529500111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.907d4d7d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/cBO8JMH0KmMJnYRiZ+90ywWFs1UDgyyuhF9d5p+uGezDwCUvWkI/1WrUu1OGpUX2oUfQqc6lTaKDaO/9/OnKw==","shasum":"9920960fd7673fa83bcb97d26388f95ea8d8bdcf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.907d4d7d.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIAFCRA9TVsSAnZWagAAR1sP/3dkXlP1My8bSbZVEGlK\ngU9EKqDI82yMMmspoYibmg7fjC2rqy1cS/p2q4hxggm326oEd066aHFu04RI\nY8qbPJqdBMHenhWXfY4M2k7FfTjmuF01nGklGlFTPkUwmdZ4HQg+ubFFFdIn\nFEpzBts9JPaB0Cl9DMk/c9pr9XKZ8qXSK1+B5CeTQED6ks7tvWfyCFFnUguB\n+e/Eizv58SYv9oISb/M+CqLEsKnLyhBfR1y1BM0S6pBz7iTdpczkKuxTdwUt\nlETzXKTWZuOuUBFg4ZRS4jBx5lliD5kLN57QzIqyfmhBDdVf3hSeFo4CXa1K\nCcsIZwryMHI6y2HOuF3gX8YbwjWbA7EJRUNT+bJlo9mjwmvBiWL6BaKsfFB7\nHDEnugr1K+OXdwTF3Z9wlrs5Jn74/sMdG5C7SolWHW6KemTnRjw5GbcJiMhf\nP7NgNx+Tv66OAvisJcXBl2dbVG14e3za8aYPWFF2OFjUAGsviqR4S7FAGCcY\n0KzE+l8INmqomlrXUpfPgptLqvo86Imh6RF0x6aX8ZxKEBf4TzDZfXSABBEB\nSLIKCCetGZwZZvRMUKBM3EqWxpvEBb0iMng4P6+EMXM4GHShCHyxlYi4moJv\nWvfoYG4QYo793vsx/RgXxeBhCO03bWLKa1dDscT0iw8Asf6xXHwf+tXKhm9T\nEOYw\r\n=bm/+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8cMrBoU/KJumOTmPyY4aKXzSqOJ7ukAjE6Otf50FncAIhALEzDX9+rhep6PgqXY4Sx2FkdZvFvU+pcv3fgm8bmwE6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.907d4d7d.0_1596489732421_0.15440003951072945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-top-app-bar","version":"0.18.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.18.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@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-top-app-bar@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-lOUvxWpSdLizYJko0LjMylM0ESQzQB99WKImKiBzljAWs2D3fb5l0rdIN/zRZwsi2rF71u1fv0+2AswZmd/wwQ==","shasum":"ed0bbddf112e70894bf677a01a5a9ce9a768aaf8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.18.0.tgz","fileCount":20,"unpackedSize":83057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICGCRA9TVsSAnZWagAAfaoP+wVsE/MW5smlc2qcOb8c\nK2U5ZI3bZnMq7F/koZrRrxgGVrJMnU3HAlvEr1+7Vre1EInSr/2u8dn9Mvep\nIZQEM5HlZsY0GdhqjymIqVCovvxMu7klvmnbpIS7zyiBpJbfXUq0FQLOip5u\nCC8afcIOqFJ6SJwoJ60dHNRY+e49OPLz+2ynqR80lGKqCiG/nuM0k1+lWN7H\ndst1BBDNv3MW9AaI3+cz96sYA26QoTu4XcMZpO+WGA1mrna8RA/SH/gEEdL6\ntIGk9vbht9MI/NZHrZEQW/49TLLP3oMP70honhc5WLTaLXEviUQ7KaeNSsKK\nDSkg/APzyY1rrHXvo4/1ZViSwoHpVTH+bF5EfjaQhm/bDjr3zNHUv6udaMih\n+e1MtP/1p3lBo/tZM2EKMC1tSP82Ut3lp2zucXQR6whLIcxex+kMZWKJu/ZE\njy7QuuKWniOIssSDzPqNmt+W09fxj2loPt+d6mD8nCH5oc98Py+ILfoQo4D1\n04+u1pkOaSBEAE0rVY5kMv6KM5WvpAS5fXsz4M8JhOXlSx+qYg0ZZdTI1xzX\nyLN035oc4C+MILRlnRD8brtOtpkMKwQCLI9zWLy6N6xfm+vjv94FDPsPKbUB\n9zk2mKHfn0cXiicdkvtsUE40dxmqg77DspA5ym7prAAMLo4SFSRT+KeMIdWT\n9JPf\r\n=g8Af\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOnfeX5AzCBgZcfNfabfCCNh3/KbESYbE7/kT+y4CxpwIgXrgoV97wpfelHvvaC5GJbOtXuyDOLdHDFHpAU3VM8L4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.18.0_1596489861835_0.37885984232074943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.f7958e4a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TN/Fkk+9GQ9jOWnLTu9qbPl1I5wv4qydwm/Oyctd/9nml1C6vgG11xb77QWZiPfDj6jMFy/K+hCLqzNVzdIvGA==","shasum":"6cfec46bd3685b6407fdf8c0e55aaeffe1d64b44","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.f7958e4a.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMK0CRA9TVsSAnZWagAA31QP/iyqK1C7RX+M8rCo4ssd\nHu37JGtBj8YikKaplLq9CEKzCV2Y6sz4sVWP8OqjJbH1n72WMJz8+4l6pdc3\nMLpH6/+7c2UKWr/kHA1qFpLp2PGhK9CW7FfNOtnR41a5snp8UOuwcZJbigSS\n+rqh9M2KQX6E1MegJRZX49m7tb1V6uU5vESieYQ9x6YnHHQs7UvjmrpQ+UGl\nlf80NEynXAZ6GBagNVaMMaMCe/3josQtnfG9n8u8F9NLKxlyYBXWs8Pdwo+v\nBWlt+Mfzpn+l8PMYnaZoU+1Y0bfOJKjf3HgFDe1DzA2gfdkaELr9DsyFmzk2\nOMDV6etVxZ6tiVs+5KtyBA22ZofDDLx3f2uSet59OewaaKchdpCwpfaCjIsj\nrXcq4+RKpMG8YJ+Y4Q5KGZgSwTpfGsyiSByrwQmfcYehqNsHaLSJYE8RJO9a\ncjL+78Nv7lP8OiwZWclfhVUYdV0VpRimVTQXUa1O3alIA7fnaaA2EpuapShH\ndOgct8+VzoKS/hpYzpejrQNrkopEUa/YLrrczRHvofxtm5/9cTmw0DjXPBJ1\nYyhgl7zJfe21hUuC+uLzEenXEpe+jdS3f/c6ybh66jXdQHGAFUCNht7tD5qa\nc5dpGUaV5YXPJ2skx00X7VuKO5TKhhSe7QCyIQArh0MwMSkfx01OZFtUO/z9\n7v6q\r\n=5q16\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQp66/x2lRSw79f9ROn025AItfqxvxAb7hX/mCaBttRAiAuu8Jt+BzF9A6GUA+YicSMkV17l185UXjfeRu0MysGsQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.f7958e4a.0_1596506803643_0.05525524944738214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jJABXVnGUo4+Skkiu8FVBOJQ1pU2bcFMUegsmdcPi3Zcw6qGa4xQZ6ZqcFoFJUogWGf52DUkjqQDVnsUWsBhjg==","shasum":"7bfe7371479b0751818bce18c025a8f20ceba6f1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.f8ceaf79.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRlCRA9TVsSAnZWagAA1TwP/39gcz3ls7K2ze3gwRYF\nolmBRLTSoaon1xZbGBVjZwtpMUFBpPOWs9e5FvWnnFlURFrcLDaes55k0MPk\neVoGDdbXdC4WXNinxWaz/MEhBj5NYxBwrCdMEMpW/bwUyoWci/5oGUJuJpNZ\ny5JDnXlVuM7pEjDNd120QriPADZexqSIfxxC8Unow287cza1gVP6b+pDI+3F\nz00m/GxMmPtqGo2QMSjTzIYlUe/sPi/4UoFSkZFleqbXv5Jfmlninx+37FO3\nuLHexcCHcI2MWFLF+6UZuWxPSk5TR+v+8LaMyFLEkbygIyVSxftVm0Fr1Sd1\nDuMtHl7Nmyn2ToFvWfGlLAo2Jw/bGNjLc0SkacmNLrvHAryajJ9iYCrz/WLb\nANh0nQfY3JXrqxplGru8E4PEKSdpv2yUz3uXQ1TjX/TK76ORMevwo2o6+wIQ\n/JXyVg7lIY0BSD8mIKDB49S27A/WwWfBptAeLI0CrgWMhKEaNnjDFtuOaR5U\nwN+YFJ6L/dy3pFB2L/9GTR59oKcWBbUEYmh7lL88rnFs+ufDsQ4oIsSbqf6m\nHhA4nKbk3JWOKjtz4F/S2wqS32pWSVlsIwN4dO3p6GhV7wO6ZX0PuW3hdfM2\ncQVjGak6kVU96oRiXsEgtzAZQNivDqsiF8dh9F5jwGiim2DCKY8ovP7Ghm5c\n8iki\r\n=AN9v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBH4rOciQ1v3jbiJfCVdwt6tju0SOh8SZxHB4cN8DXOPAiEA+zqc0nTX032835udbzpzgLblb0NXBRH1muUhDsn5cQ8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.f8ceaf79.0_1596568676786_0.3995165451285798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.6b9e385a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/JsEK+VzKwvyJcfQ6+2U1u0CMlsLlLxMinq7CQ7Dj8cr0NvlkgDCXgmQgqBMUiGDNg4oC9BxT83iBAPHFGC/Iw==","shasum":"7e1b121fcde663bf1526b5faf8a5218669668dbc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.6b9e385a.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNDCRA9TVsSAnZWagAAqEoP/iev3QgWS8g1JxoucBit\nFo3j0T7NsZMqCww6Ts9pIkaL0AqClPoZK0IMercwcDYHAOCBl3F8oaj+IzRa\nLdDFNk5UShx6rYEPkjYUzEM2UaB9b3qhCXrc/QOXNp8LrHR2sAHpnSR0qdMB\nx7mPBw9yN0unh2fiR//iSBO2L5DEoxF/qcP2q5240BejKwWQI1mxv1UmnUXM\ny327j/MB9iHho76alT6Bj7fazy2Tp0MnsJ2Y7sT8J3XBdvejHI+TxyfYOrQx\n7FJQ1KyEDxSPPKMrflW6LLbBX9P0vXynfvhnzzLbdV2+242tRMbkPfvdiSO2\nY5AKaPiMQttLEW+Td8HfYOmI5gc4UhvjmG/POC+S6XC+DFXIMsnW+gxf1R1e\nucy1p30HbiI/z0DpUJaAaBrSD5JW3baRpdSBpzZFqO6cEfGyyCMiLQ8avr0w\n8n2Nnsv27lowEuMgg2AVlxoPFLboqZeHqphX5ks7kzIsWtZP5gudkrI+Nm2K\njNlyYl/gyXUKMMHyz82FAkKm0gD4Te1Ah9nNQazU03mkq2NcnhE+aKYi2TLN\nTFCMSGwsmlIORT8emH2q6ImLSdGao8pEEf5pv3y8nIaB5Cs2Du9jI/q/kELB\nV08A3vyGCFj2l2GGoVUeL1Mdb1eA0K3Hk/J45zFu4GSN7i1ja3XTpH8Zsadz\nFIaP\r\n=JPhF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBW3l5g7MSUOwwLD190MA97YgUou5QzQobYhKv17D2viAiAvNBvm5A4/AbqHl8k8Tg7DzWeDp/dxdqlIRfnjL3kMXw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.6b9e385a.0_1596576578915_0.5192361008766908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fkSm5S2+nYbo66JG9487a5uyAEPT2PB5IeU1g5njCCk+WoEw/64ePey/MdMav08s5qAUPrKJuADzkJIK6aUnSA==","shasum":"4a39f8f92fdf507b13e9c7dd5869f988eefcaabc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKitvCRA9TVsSAnZWagAAeRYP/2UjHt0FkhkqtpGNtZb3\nPsKNumN+2LXu6uUT/7/n0nHFrIx+9vjSFE9Q5SVsZijbk60ZiNjJACu5GBxc\nRLg8xshFb9KOXPpzDbR7K4aknmLzZO/+3weYgd4/Z02spOUEtKrTZ8JH0elI\ncnZMOlUyYJVdPSHMFPAcUiqq1JRDRFxSRoYD8nUVmYeB+WfLDeTd2lTi0mtG\n8vAevYbgifVHWGycgrIr57wrrlQf5Dbfcd7A61yV4Zy1TOECdDsAxiYgHfht\ndlkjV1KxcisqiI12t9vXaLplTLmo2eHwZpNw3aIkkU4IiDZa3dJYXmHNjYTZ\n8pRdjiMHDY6h41fyRiwsOpXynezhXFWvQB28H+5wmd+eesbvt6LiNfXSfH9u\nrk/kERCeQ6nOUUVPPYoaGLafnWsnNg7sMS8YssqDUNvtEhol1Ss27V5dcMCB\nq8xZRbqEXFDVZkREbUjTyDpt4lHcmmR/KA95slS16Gi6FYExurv4MLw0hWmH\n4s7IsnP786AmYafFJm0+C7S5Z9YLsAS4FUIXr4U6NQkRpkiderdSbsGe93BP\nTrrTtk+9V0+SBvDZGPfM5d+RyPxZo/CTfVPXiJBCpY9Ck3qiZNEeF3fc2ljj\nk9MFTIw3uC1JYdppuI//SMBqOS8zG5MCb8/uerapVkQqPdghTSGeA8kHvPbj\ncJdH\r\n=LOg9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrRVN7yS2w9aaZzLf2NU5rB4sQv7XXhBAhMrIg2nG8nwIhAJLs56PRGf1lbV/8QnpOUgrtuWiopbFcY0IrDTkgD0jS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.9a7e6d2a.0_1596599151193_0.7578447054926953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.188f3f1c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+jexAoeo4c761/1fPUZyY+EMjQV0s3mbr//OgwDqK3eGroK0h49AT0jaCVJZkxJXccflfLi+Yyz42o8KVs5JYA==","shasum":"d02484d2992b79df7c33a4281b6902382f2c5bac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.188f3f1c.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKva7CRA9TVsSAnZWagAAMo8QAKOaK6vYRX0lzrGyfkof\nlPJVDbq25Gw2NgBcQ4F3gfQOw1ix7kGkD0maByZO/RIlKMFE43ZMbQZ2XC7i\n/OWBJTdUHNYzVxxTB9lpaOl3tMuvVRTVkcrTrST6kkd8qkr3/PdyRsdL6j7U\n+pf4MoUMJ+IkjU/XOcrXSMh223OLunUWOC1bjU4PYGD8f0Q5KUo53NQ1Hl1Y\nu3N6W04HtWE51Qa7XfYQk83MmiKzcuVV6yCYy9DEY4gkrrQWYuBAQZtw31jX\nZeWn78i6fAQ+L8wBazlVrfIJCJzcqhl0p/gmiPGWyYxPvzLmuaB++dh+tWun\ndXu504Y3q36uha31o6uUmbQ2cdf5pC8wFaLniReOQH92iQxTe5OFqGBEVSvk\njOrWaE59Ne/HxvYQ5DU+9yLOITIr7hK++wC/0GT+NMXWsLsVNaLKgEf5RMsN\nctM5ZV+Uxfc6Gt7YBFuFJHc5YaVNQx7J1VnxXNh3qndlkvdNvPlJaLWqsMJm\nBq1SL0Z6QC6WFXgEcRgSn/ohzURfMCPGws8qq1JTa8ZJ4j8D3Km0GBbDwdVk\nm9vBEG3Lx7bpSXZ96OOWIBg9QKOOBUD9hQqau6QnvE2hplIpzBgZVYjlJtHe\nxI4oasV2LElhu87O26KonTcc4tUES4fRISHV4ap54Q2M9Ivvtqo+WVycUVNm\nn9gy\r\n=LyOS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9G2y7+jrfpb8dZAEtXiBmYf13qxaaYgVhdItix9iJHgIhAMtqz2T0cXAAiW54JfpktrMuHQ9e2W6A3kqQ7J05LFoJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.188f3f1c.0_1596651194693_0.8415420650584688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.b6106add.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b6106add.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7dbX6WjDuP/I/HEBEP9UY+s+IP8wD+59z8qkaOmTuK4RB2ugVXxr3QM9lR4Cy0pYpWoar1IMcw4eyTZhawOAOg==","shasum":"5532fc81dc97aa5958f86d030bdde35989f6df5c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.b6106add.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtLCRA9TVsSAnZWagAAtvoQAKLfjz8iS0pZcO/QLmkN\nOQvcCAAizBr1+dKXzU81hrq/UcWqvCHhh2Ft5UeATEUKDw/dSsoJ+1WSy9rD\nGnbnPuPxedx3OSMNMCU1WGuayVADjNiKmcZyKC97dy51ds+JW4HLrrwldZV/\nYsFeFu3szDBSi6KXdocGAw/rICv2A0woD6u75AORR1D453Dh+Vo3bRM8znuW\nODLmU8D9w81R/W9zMSnYdGhn+1N7gOeNMP05BbjCSX0cF8U4kZdblt9hvspI\nPmdLCrk311d7ZfMHtXYURpbdwGEmmwpw3cOYDmeXtSzsxVctPaFXvBPksnZ/\n+IUUqXk4NPf0ctimPyJUanrS9bv0DN9c0OWOSOXtfrkXsOX86NKnGneICJym\nK8Kbgn4UX/Tv+Hd0z25aIZsYNBQ/Wh2Ceaqi0tmv592NS480RfKqMu5ouwHn\nbsaY0WfCEZuvn+Ld3aJLoJFgoh3mqCLgzss9yEw0WqwpIOm8mKCWYXtizkAM\noVJwRrq0cnI8s6GvwOGI2/EeXeqhO7sv8OqvK0VAr0boZZMmxqTu8lycQaNV\nXWG1gBEIWtdO97NraaREY8ikrUp9RixBzrbifPREE7ni4zBr7MTVU6Zi4JwJ\nVu0MuHwWEKM+cSe1iTqm7xQ95lMaO8bbFnjGIfR2bm7YSa8XUsspfWIy9Au4\nNxt3\r\n=Mia1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBClmd76AvGb5EA/8sfgmSL8/jQ36A/C23DdnqTw4Km3AiBK+65ydrqlPp7oYVmQpgFX7is6mslh1JErR20s9NAfAw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.b6106add.0_1596660554425_0.5192913580795553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.ebb4c667.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7oYxoMya4rnyRmD0Z8aKX8jnlAJmkyTHmBsAG4p9PHtTlpxv5dU9PCuyYlP8Rxh2GOSJnzQbyN7v3RQhj1Fnlw==","shasum":"cdd6b1471f5577b5dc5e2da9d096ff815d3a098c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.ebb4c667.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xhCRA9TVsSAnZWagAAwXoQAJ5gHg0ucyzNpiFMLqbb\nj+UxQQjlmVYJbzbnYKQYHfANsHfbCxbHnLgWii5VYD4sQn17X2oGbzx9RobI\n+rebKtuHBCjhJP8EdBjnWSRC0uByH/yGTYOs9FjqMTbZ8UbZ6J9VraAyEbkn\nKOUSifA9YREErCibg9tSrUXPaKzahIasi2qeDD90Wy2CxHn5RG0dxV23FBOu\ngQDtIVsJoPCu/qBsBRsS+kRzRVwBC4JEWwFch7x/SqUKM6zZkmtWrsfPuBuF\naB07724GnCGd54SlWEhF3JJSLIj3qD3I0N+KrlpjG49axyuqlrVdMJe5nRw/\ntVza5sRdukUymgtnPLyA/BExr0TaUrk8t8aIktcqjTT6St+b52uhq86VDe9F\nd7elodU3c3HyLNj/blFd0eJ/Mhekh9oeHXy8WFCKbWqh2EnAC3/NS+GQY8HL\nevzfPyR99r/DcxSHS4OXTwVN/AZKf94fNoo9qJPHXwcPqys44lFquHT/oV6Q\nsazTaK9cfkW9j+xPLpHWqATwUrWGteO5b0meKlSUb1KqYtSSrY89uMQkDv6/\nIkt4o79MQ6/h2TKQeVDHQAxjAtJ51n0+ESxgshiGGFVN+/GzLFA0HwfFV+A+\n+QY95UEs62+TvPKnDHWildC1lLGrOx0GqRQ+pplPVG4OgiKCIi1OqZB8RyHg\nLx3N\r\n=kutu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9i9pQj2UlpZvPqvsBtrkjLUXhllwN0gwQsSxD3XWUEAiB8LFZWzg4pOJJj/UAG93B+2aeIh6//tPQx+EJGZbgL4Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.ebb4c667.0_1596673120866_0.9922244675873764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.aa44289e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-StuygbhAnxK5JOh1PtmT4UVTV7yD2b3aEyuCM/sxeRG93iIUBOAjECAAJ0sJ2xJBneql93GJB15P3VMic8w2MQ==","shasum":"fdb122360a4d0e88ef1aae1606416a2610bfe79e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.aa44289e.0.tgz","fileCount":20,"unpackedSize":83092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEuGCRA9TVsSAnZWagAABEgP/R2z8JDZ9nPezhzxQDgG\n78uzqZ7VUgU6J/lV++g945EXKlPAX0MR7oafP6+m7MpPLJNMYZg4OuBZiqq9\nVi6P9GJOkEPfcch4hYdfJeJIUpG2SMIaDZl8V0Ymi1NmNyWwDUuI7wZSLFOh\nphoZJz9dlpoyMii1WmjDabpDeqBiyWHS6+aqmAV33yigDqCqJHfpgmlgUWpc\nYeoQ2ziQPA+nv8IjUk27tHlODipSl2q4Ga1/Dctau1oPAkyykygNfqs0YZJ0\nfkmJaAam2mCtK9dQWvA0ACA4CRJ5ytecRyEcQvH9+kkDZsemHa4V/813+CdG\ndIHuHrV5oE5iVc80dtWWTUBMJKMrvY8N+IowpadKy6/vPcxJY3Jdqrp4ZFWm\n8GCiKvbuvCL08oSWCdaZpt+hz0zzZueic06MNiUJGburCac4Zdql50So4bPs\nXnBcKhztXTbaVnago+tnIL3nlDEsn7UM7k4w+gehN7Inf/JxG1SBpZxiqb/I\nyeCk9G7eS0EXTbJTD/XRaRcZlQsQUreXhTCepxDlkWjx9bXKeXm5+1Ec7ENT\nkDV+DpWtX+0hm0k6jbxPnSHZdWrbnaKAf6g4AO68TJTE0pSEBOeKfN45ojZ9\nnNKAd6leocOyIA+D3CWsw7hTaYTtt/+RG4WGjn46L7g46sa8G7wU22QsN1PY\npTE3\r\n=3EdJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9eUPvhWgqNZk9gPiobI2KX2IfBChCT2aaVrgrZwbb5AiBKLiVIr70IO0h/KEdan1JHc2TD1GdBDrNX+1cGKUtvFQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.aa44289e.0_1596738438112_0.45738583966121205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.e6b0816b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0T9nbXJouGGHkXlE5XtmUwSfMUsuCfgO9SbCWp9wrikRltThOX9YfLUDK3DXcK46r63XZgpCnmLtXeHmzbYyvA==","shasum":"5d720b2a796f4f142feb63d9752f9ed8fa1566f6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.e6b0816b.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDbCRA9TVsSAnZWagAApO0P/RhTpKTE9AJVfgF3pgw4\ntsVbtYbBuQ816Saczqn+4lp7bu1BjvCfngctk26ild1YDpFNPVVfBS35LRV4\nbuKIMgiW/0NlJM0s8l/ikDC5T+7xVq/nHNqOCeko66urHRM1PtekVvl/XlUD\nB6N9HtvEmCp+FmM3kOqoPFHRn0qY1IQL5qrYcYi7Im2optd4JOEMraVK5+/u\nbC0ChxCl4EZWHaCOwpgOaBdPf3AbjNiK7a/e/tpz7QX0OvtMCtjXJo795rAL\nV2lxGkMxZqCU3J+9TfimZMFZ8X54L4Qrpnn94Rb+yeubbesLGif3pgX/ru8J\nDCsUhQk/SUgqaVt3yFnHiE0uH99/KckLOmiz+iMT827kmQCHbPz77I30TzMe\nx/qCgviZhtv1gHH9H61KWCFfgdWk60Zpgg0fuEIl6Eds3nkhL7yPFbECsVCu\ncVFESjRNsnogTdJqpjXReMf3NV7u1Bu2tKbi9U1PDlQ1i6QrDvulZdGYdhIt\nSHlOwaI6CTedq7kbypRUj0/X9o8MecqW2abWFcoqh0hp0BsgbX9gyHqGZXAc\nbD6eeSw44ELBUptDT4DN0Tqtg7Xyql5nUy8HRtZ8jBAjxqVWIduTfcv5xwqi\nHdehZFbEfQ7TqdGbxp00ITJfRCvC1Xwp4/yaX6a2Jdewsh6mdqRfdK0VbKis\nh4WK\r\n=zZou\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDT0U9l1HVTV5ILeBFUtZKhC6LOIONzdKkfVuTHb2y1lgIgP1dc8ivzwqR4UUL3OgVdvY+lNlDXE/Y0YIe3R/wkfMw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.e6b0816b.0_1596825818789_0.3428005459923853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.96d15938.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96d15938.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-r84nylsA5mRuz1vhblUSPGJZ4e/Dpbxc+EPzB7n4q/THU9b26BufnPtSjNL6mLanAdexK32LLsYbkKJ1wFoAgw==","shasum":"193db9c1ec1c21689ba329af8b30a34cbaba9f4a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.96d15938.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbl+CRA9TVsSAnZWagAAe3MP/j8tnmcMNhxR/1rxiKGB\niEV56OW/Op/+lJlhL3/Fc6M0Ev+TYdzFqWeuRfvW4B0W0o+ksSvYHWzCIkzM\n2biKtwXWjnjAdn0n7CpuoyqllmT34B0rx4VMgfUv5HhomNVa+3uq1Xgmzlak\nr0GUWJpmvsUnrzkN3otaa3DbdTjPhLSQHlTbTakZ3mcciyNgrrsKvreOqCsI\nne1viEKLzxLYdB8qPJENgKvXjIhxCRk7sNSKXhK8zAs6R/1QLVTdugphbFPU\n21e4+N632tTHMQ7voZX1BHBaVX+Iz5pGPdc8DyL44Z3LRmuXiNHo22wFZKq6\n+lKBe5ZXooJSdaPptclhED1wvJtvbhSL6ZMGvDCLzcmJ7wwDlUc6EeRoALkw\nlQT7CM7dZ5gRKrg+Afw7I8i5wPM8rq/EjIq+qDICgwXHDYu9ZivEO95Df/sZ\nTDk+GyKMU2lSLSln22qFDPhqpjPaTL6JelkAaOpNyEX0YyGludEtr9oVhaOr\niXEsJvV4Vw5kCCcCLbjtUGBdvrsZbTzwK4EVVYY9OcTsVQ65Hg/rkwsHzkNu\nwkuepztuzgvhEX3OFya2LD3czPiwU2tGLUyqDbWtZRZQf7BklfQbeOhJS7S1\newP3aGf/2GljbKulR2jCBIlniVvZ6kxuCbJBofHDDvUWM8nHWWsvuWBrPnko\n1wGW\r\n=9pj9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/pMYAx6HPygEAF/ip1QRTDs0OM1SiqJHMICkjQOwO5gIgAhFAoIn66/1MPevWHL5ILPrWr7JKGrUDAvyjzi5D+RQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.96d15938.0_1596832126115_0.8022885828175916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.9d991c8c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Tga9OOrBOzkisSnmkvtu5OGuSmI0mQbWmvZfQpgTFWA1VLf3un2dCxIhCuvVHPls3G/BSvHVCCPevkh/5lSYjA==","shasum":"38cebd99a3e3cfae8cb6110a854fd61fe1cd0828","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.9d991c8c.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDTCRA9TVsSAnZWagAAF1EP/je6vWR8H7tP4YaBx1We\n40Jfjsw1UdCgyC8d2bgInjnh2GU8yJCkfb3k05Pi93b/gpbtPW09DhcO8OHE\n2TwYlQ4LMKqhfNR8pVo8x27JYW1cCQefHcavz1eHz03pbrG1yZA7YrjSWKH+\nNYFcQpwIJ0DjRCF8yrmRLAXYiXp1EMSC9WZgW58v6qN4KalekCt6A46vyrVr\nD8EocegoDbNTsGCzdQCOIF/PJU3w6td39fNPTg4xhEX1uulBP9fmDNs0REFp\nfAvvKsjlSAiHM0lcODDxBD7YorUHpBPJMjNf27u+xWOb0ttF51ACVoiOKmba\nbJ3q7D2v9cc//y7XyyFRkyYgm3dCRY1rPD4l/FFwHmqE5zzO8G3yrlhajDhk\nlA5HKTtWIM0oZ+/Ssyuu9uO9xFKnTkPTu6HJNripOlWgA4RLJ4Jf7YgflgzT\nGCkkphqgXWYR6fsi3+c5pucwMwuH0vZUU3Kp06FvxXqqdMq5whhvhrHHzBc2\nL3ZqTM6J57jwtPK6Zl5XuYfXukNTA6pTIc5P7wyhAGZcrYFDG7I6N7flOBeW\nKdMW5vHl476oy0D48NH/e8hdRE+cjnmw1R35el86oj39u2q4UNOjQ2KilzMr\nkkFGpM5+izvi3iGz99EaUr4R9pUwJeq/dvVeMOZH8C+BeNgvo/V/tkQyMH5G\nXzgl\r\n=UmH9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHcSk8hi6lbSyKHrQDIruwZjpOB546RvieLlzB3O41JAiATo/Vx/M5LszotXyJuOQotUvIYR8YcyV5mQhtYz2bVTQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.9d991c8c.0_1596838099263_0.5757514215987896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.13bfbd72.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vb5Q93CAijfBpdYitcJGLHdxI2ssT+fSB0Z9+l8wVlOVE+lWTnbXa2mfUFisxdRyPpQFTUMq6zlAP2GQiTm3eA==","shasum":"a6ae078d1c1e8d0b86fa1f708f1b07da7ec92923","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.13bfbd72.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+VCRA9TVsSAnZWagAARaAP/2Xj4FDEoVHsChVwOMZk\nPy7WtM9Pth2hKd3lTOv1kJylHNJp9p5f8u8HkOIHsxRksib6MtiH6Wb4QcJ+\ny0NkUGt7M5d7+MIQVgIKbbx/Ys8zlbmtNIK5q48QILuMUOMLH+/eeBiHoktg\nm9GAP/Eh+WFsjezh/p7lcSkNzJoKz5+N3PVi689BBqoubuoXQbTdfs9OiQhj\nCm44uHwxCzxio1wDnNIYHVOXRu3GprQGZb/gWoqMckjtdz25v6MCpUkJvvvc\nf5TvtNjawNvGxZhsWg+io9Ma7x2b9gG5A5qWkIktZCQ+4jBQfDjmjOd3y2HL\nGqLQNQDa1DMUciTAIfPl6N4LKXfwnJjvs+fEuFleYRJtj7XluowGnoi6WuQR\nM8149AZHtPbMGnb2NUGJA6TR/+78esTCV7Z4EN/hVpZuwXOv9q/xl6TTivg1\njndJWR6Y+PneIyzfT2xm447JLbVD7zttVvGdfIVuONRuT6ktVX5hKOytp6gu\nGu3Psjqv8lEhxoVNzf6f2bXcAphfg/k+cQ4TiS09hyPM06689bNcyczmZ8/d\naBSqhe0bDOr/lnbubD5YlMmOk1XecVHWphI0XN/M+oFb21IjFj5EmbyrWPqr\n/n7LniKjao1yhtn5mBJMq+khTWu5sZV6hNUGb00rjvFFbLAX2J3uYqGmi5t2\nICJF\r\n=D7IQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgAMjln0GJt7d2NZJ3Fp5THjzbMa36lYA1T1YBpsK0bAiEAv04jLZrK1q+R0pef+7c3ieUWblH5GXXBD0ZGeLIRzcE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.13bfbd72.0_1597087637103_0.7698156267777307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.30b1b258.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ArgUoFN+XPnJiOPguhJVPkfzctNCgFWTeqB51WzYydiARLmRBHVNKSlGNtyx66+dtlAnMcHB+yC1/KqhbERHAg==","shasum":"04daf6755ceb5bb756856654c4305adddc973929","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.30b1b258.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajdCRA9TVsSAnZWagAAe6UP/RGE/xnQ5mcRzqnEkUT4\nK0Oib//8jyACeuG7DTuekwSGrqhuRSqve2l0FLyp8o9Ge68OW3PQIpJS4iO7\nlDMWYhS/THlWJHCm6bMEdC8CpWTambbDkiL0+M4hD3swPUt5dR4wjHFSvMp9\nzKZNXMutHJIL6nc1N7nAvsvKSuWgc2hYu7bT4EMjXDhOmqHfsxEli3gt1dUH\n0DBtja+xukP1VOoK763PR6S6nYr7akJNv+v9dO01BuNaW3GVqNUPAYl6UKbM\nAzo1NSVE0Q+k2fYACbfxpMUYypeRDI2LsZlEzLR8rA4lXT2pXGynXBKGf4u9\nKpXf2NDqYJO4CL6/pxanzPWZ/RTj5iEfcDpoMo4cf5ihAdPtREl16kR2HowR\ncBXzOfqQtuY+7ebK/CYoO6YacyWPpObDu7JYhMTV/RTgiLCrej3D7js0cRpv\nw+gKOGC+yYr4APzwjWK0yuUBj/mq6NmWbh5ryjK1wONDJe4VYurblX3QaMtn\netbgr1gm5rei4YKwBFY+z2y0RFIKyotoEFBPPsNF5Ti0az6LBqpuP1aAAoKt\nzbo+z4P/yiS00p5ZORnc6uP+ewipnC5nM6mLL4jHs8vcO7K/hZgOuf2+/vJF\nDdL0N5R//LCBenXbDlTmS510FUhiLzzfPWZJpLJDIOyor1cImPJ0mkeKGWRv\nJ3pb\r\n=wDzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDOUs83L9colCGCUCj4Wtt1u9C0YHck4ei9QYvBi26AgIgKrJkjY6aOI51JKE69T1wF4xF2JXvrRGIUZ95hGKQcM4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.30b1b258.0_1597090012629_0.12740642577266326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.1583e263.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1583e263.0","@material/top-app-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9OawYUXq4G/fIpvc7y8hOCNesrYVQa/UZmJmC2WAHC+PEzcUeSKIKEn3gA9TOn4tz/RZNX9V2BIZLyWKlt+7+Q==","shasum":"78ee70d3d06bbe654f8aaf8936e3296c1bde1d3d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.1583e263.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyVsCRA9TVsSAnZWagAAKywP/1mLUGQW0Cs4pfcx+XgA\nxkSDjVjCaIi/F/nk/pyXxYIQYYKuyBterSZUwVcQe0X7Wb2ntDFaXXOvwOdI\nPzWBj0/jCnRHwT6sRnBS7AbTtuP29qbrHzAlRJu17R20kkhsx3OX5p0YUkO1\n0lUXbaxLbUCHBGVwBvSljVFbYx+EXzqWb3Oc9mKjGhLTbIMgNxvAlGcrZSRl\nw+hm0eTR2CyiicWOx246AMTRnHMgqsjwRKY15NYIo6dAttTJUL0RJs8ePEWT\nsON0SHvyfwlHnnu4soQagRDGlhP9LIWPCSbBpoCJ/ktMpJdA8fhW/1zbjxH1\n228PyUiTzFP8YnF1L9wG/QxLdcooI2nFd0j6nLw5LF5Oy6Su68QG0TWL5Rg6\nWLEezIRFh+7ZsStO4rKXhU2OKpKKuglXfUP2+yu8wkqLupQQ8veGvbHyXV8H\niEURGK3DhAdWT/R6sBl2z1liUOavWfFRZOjRBw9xpU314Ax4KT/dF2OqQqX0\npeE1qSwxNKnv29GFjUv9ndaR5tB8i17krCVFJaW3Kdt04JwzwyVglp2Aqz73\nQOD+5ff18HIMeDgtAAB/cM9sGbin8x8bfxvt1L4jvGtSGvVXrGBmC3Yd36km\nkXpy9v4bQT1PzjXVJAHKtuCzLr7gb4uuzQ54Q8MM3rMbLfUBYep543xqAcwo\nDSk2\r\n=EE6q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAMOITMr6OhHBoMUb1WXVmx0G7hrQ5quO7cvxvT3MA7QIgb9OgrkM5MvVbbjaZmNE4da9Hvx60whZ12px3fX9CrBo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.1583e263.0_1597187435606_0.5152607413525065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.fefb1a93.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/top-app-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-h+GyoQfyxQG8PAjswfkWKEF1u47sun+HyonV7v/oo1hdiYiXqSZiEGHCZ4FpAhbMFS+AFI+XeDFn7sqODKM2xg==","shasum":"d12f31049ea6808ad0f99dd991db69b9ee02076c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.fefb1a93.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbfCRA9TVsSAnZWagAAZngP/229spzlCebT2s7oGPS4\nSnlRRTQUt2FfypIDkeqqnMmPURl3+qVIXJfWUJ+w0Ew0pegEisGl18BcNfyC\n2JPT8V03NOwSr2WyebvZxzwEVVRCk+6wTsR4Y4GKzfwqIPcwn7T03YHloIsU\nqB+lN0mi1aBukMPWaX2GIvF9hyquu05zgHYoyPXqxOfr8WlR/qocew/ED+HN\nmupH9jKNMWjQPJRnchEc9KHu90xblmmhnlbDqRamt5Z9j8djX2epwvyxID/g\nja528r27vEUwapeUgliaTMV8+GglAfm+fIr37RblwXBlgMrt8s8tdzSRYYCB\nJtmDaBjrA+VzHPnALm/5cVP8/34tVDz+D2KFW1mjOodWRQC7Y+P50P8kDiEJ\nB4D4YrWTDb7qzns8i5k9OIm/dYLxaz0HgqPRliVoepzXWomvwkujhsO+jsdu\nL2z0ifd28xme36YeZGuZqHGbLxoefavJnjSWDYmP6h+Um3kFLp5Zf75qbCdB\nhGW1Yx1obX+artCB9NPwvXxTXkY749DU0LqzPx/1ntM1F652ne62io9Xk3jc\nGavOVeblF7Hme0/Kfjdt3hoVc7UslK1Um7PLgUje+JB/6rbvYY0RuWi43lcp\ne8FPBvgfmCnUT0O+u/nT/by3kXmcqnfMitsmBiSqXXkmxNeTAohDLNcPGbCG\nmKAJ\r\n=DKJy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4HxktLJ+JYm7lP/ZipA+kuVmyJtlntSi4CTH4fWcIdwIgFC2O0CkuG3GXjf/TAjqJtI4iXu8QemcizcJwOTClQ6M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.fefb1a93.0_1597191902676_0.170216072775091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/top-app-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nQyVYXBSuxDyRU2e0KeRh/KYgqb7aTXbPdZU2ysrWHGD0BsUtSwRteT7pTQiYUPAxTVHmlpjTRsIkV5Cx3dQPQ==","shasum":"c7711ef865376895580c3a9ea5c78bf49cd221d3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSICRA9TVsSAnZWagAAVHUP/2cvSXWZoAo1ZW2IuaeX\n8morvcrqi/4kcMHUxlxQtuvAqBqHZpahsI6cyWL7AhJU65GSx/3E102Wjjvr\nmWiuwyUGJybqgsJlQ3fgsINnApm+Uc+5UiPIwlCfyBASP+LwVLBhgr3bQRlu\ngoAGSSudNaU/mGa/zUlfxS0xfLstqh9x++WXVw1qoUyulT0Uz4oeyWf7ZbG2\n+UmkmSqSyBI5RF+6JilLJ30I10rP1gJj0mWeUdDi/mgNILWQ/i1sdqMmtNGD\nZOEFmVueTiE959AE9nihrgFW8mcuOZYnw5X4fw8mfU0Y+Rs1dB4wuj5voJ79\nfB2IOAPS/OlTAn7AtZuFJXKkkfa2DF1+ZnCIz/n66vKxWUCUyMHVL4d6vjnY\ndk41f2M2ml0wvELWZaoy5UU7ka4ISBz1rNaUD/+szC0+UiYVe+GkQNUOZ0yk\n079Y6hNSKjoCt2W33Mv+GUK/j5d6REyoZJUDyfzcRLQyiz0A2QBBvLY9aGAn\ngy0kJS0nGI28+HbAUmOsi0P7H5vVGsmxQpwp2JXwa+Q59Rm57SWO8nnxy1Rm\nzUC3w4in0OIx4o+CEXPXLluJhhFEH5uwWQf0IBO8tydOfUhnH4FPua0qVAuW\nyuzLMGWAAItN3zdM/5B2GHGfE/FpftDxxKbuBhvVJO0a7Mvru3Y92C5K7XNn\n82xj\r\n=5tdV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1khExjA0+BUeYsQi8ngh1dTKBehJRPqknvCZ9ANV5xQIhAKBoEm6KZCAVCzw9ThqWCf2qIRsLBxLz+IAnzilRNRTV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.1ac5b9d4.0_1597256839906_0.09900551294914539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.f17f5052.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/top-app-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lJK9nSlNsvLqoeP6s++WUF5F+l573dy3uOQHu+nTi+cruZzNTRnT243aCwIEni7GsNtgXOAXE9zbqEluGRFtmA==","shasum":"c2e6c787287d393787e09f7f454e63323c6e11f8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.f17f5052.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXTyCRA9TVsSAnZWagAAA/MP/R7SeiwQ3d6lYmxS1Xo3\n3U8NLTMCPOH0qKRpco36HFQTYTxyEKkPB+n5cw1b7VcyS7r/eUvD1MN+AsmL\nje75NEqHcN5wJat3Kf0yyLwKwEUR3/1yFocXYPI/EeZQWIX207CJYDlxa2nJ\nUYJ5klY8UMGH1UvnKsp28WjSN9YUJH8Buy2oREr0tu99o/ue2c4laYztCpEB\nlsYodG5HRjDW1bKk7DECMhdX7vj/n/vdsqGWAX/cra3vB3mwE2jZ0jIo0/h6\n2GfLBwrXAUcBaJfq11DbxspRJiGA9TckSyCdynJemfEPV/+5lRDd226a/KPO\no0eDM28lt5hIsnZFS5+HPlNL65X5V5XhoeEzHtADBCBt4IBKH9/PtIEqciPr\n041JLlQZ7XMxveCR5+0VS2lnFAMxSKKIqoR5zpkP8Ubmb2/7EPLetXei87Pc\nUBmqwielUsEVqcMJa+kNJgcykSR9KwGSOTqd+PCS1EuZQsZmDKBeLx03J6jA\ncUwDU9ZsFfozJpQgu++/PciFc/SnFhQriQ/op6E8/yFv1Cgj1cmPxHCkYGyf\nf0Iz6puUSCkpzVDHW+XrhBARLnQF0035p6NBEXMmqN/dTNWI2BK6ImM6tOnd\nkfn3iDmdH4IB+MSUsj6Hzfh4ePEzwpVzbUnMVLeXc63EVc4ef28s8Jy6w7UD\nN4JX\r\n=vpHy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmgeYVV+JP0GrXn2xGYAS02AhTYZvNvpYrLBLhnDQbLAiBl9p4/fec+lZUNElkuy43wGSBeQkOg9tLncpLN3CX1pg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.f17f5052.0_1597338866058_0.4538745885871842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.80b5d20d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/top-app-bar":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a1dcfe97c.0","@material/elevation":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-w5W4VsyZ5KOL2mO2pGV5MG41BHv0u17VuHKwRWRq8CyHNEFLptfFs3Ipi/TCQlOHQn112w93647hS7xCvI1Yjg==","shasum":"4cf79adc1dcf279c758d68d92c9f42c0ba65a664","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.80b5d20d.0.tgz","fileCount":20,"unpackedSize":83095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYOnCRA9TVsSAnZWagAAqfAP/1Ait2eU5S4X675y7wNm\nBgZ2SVvVm62WxEYwfEVDI4fitEwhMxDY6YqyC0rUSkayGFwX1AtZMg7wN51D\nGGlYYLaVeIqiwkPbIRivz/Ea4opJFBUgMJRL2lpIVx/EWq/qDWVfmKIUNhOl\nXQR5Hcov9Qe4RhygIwcQqzD+9bbJCHvSwjumRhb8NjvCy0von8D225x2tFq0\nSWbF7ogyppIR31frv99eYPI5Rq1ac6GVD/32mbeA40roiRVE9FdjbDlDkdFk\nY4vUPbMmxKXpEAXk+kLootDeCcCwtsFi7ten9rhi8fieHY01liJgv0Jz3YTA\nmM+SO1bqR9Ne9CXPwWEyvJ7p7fe8wjxRD+PdeIbzQt9COfdFHbEbVdx5OuGe\n5h+RFiJ7ixciR5965sZHAHNW0XXZJ0k5a1gIRAzJ+PVgFwNwTOzUz9g6B35T\ngmfAxlnRwGttahbk7qCTzQnvKn5B3rEl/MshpEOMbveYCcNU2mW/vNTwr3xG\njtbhR/raz2GnbXXX4dvKNpSBtGwPa+17o2zOGxAvM2V+zRwH9YYKz7HepXh8\n9gu69wsSNm2Pd56psp57siQjC8Ema/nuC9p1RgfFkc7NOlt4focHTuAnME3T\nwScYzNsaARx0AVa012JqDWDCObb9uAW6Abw7/s646OCmyZHQYWfIpwXeSD3B\n9Hfa\r\n=7ZRf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLFQ0O2fUgZZzaiME/qF4bIVzm9QSYuZXwVpSbNJGgBAiEAv2zskby6hwSHgAP2E6vP3iL3txxkD5xJ5InCfHBm6sA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.80b5d20d.0_1597342630635_0.6720136868616202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.758635ed.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.758635ed.0","@material/top-app-bar":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a1dcfe97c.0","@material/elevation":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ahk6+jKkljaEA3mYWAsB007XIZseicyB4fPrfHqHqc3xIvLutTE7qwhxFgb0xS3QsDvr1aXV0mHxfL6UVngmrw==","shasum":"7740c3ab158c171fa9dcd54970f3aa2eb787f554","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.758635ed.0.tgz","fileCount":20,"unpackedSize":83041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsbuCRA9TVsSAnZWagAAxy8P/RL7F+EQYrFIpNwrMa0q\nDla1XR0Prudw0rLFaU1YMJRd1wTfSpVviTvG2NawCMvUmjJKSYeCtcVrUwNv\n+X3Mh1O9pqFv8qSOAUQz184WGuObsM6SyCIidt6Mn4OfZhzba5w+jmh+RPLJ\nqAPsQdj4qLI6VXI5RtO/cKC+uMhUWIZxJNlBZ+njrdqrZAQykgWpW5L3SInQ\nJOcCFi4Pu3krAdbs5tEDIcMPIwDDOy0/de9BBnnsyil8LHtjA6Iv/jqxTy/4\nz7W7Ts3xePoCDfxktmtrYthZUc2XnmNvre/8r0ugdR9bPeLSPbw1P7QEGEKO\ndMiqh13IWWby50UbRVKV1UXjWR2FKS8FHv+Nd9bgZ8yMuvOeZ1D5vrwzqj29\nyIRQqHdIwLITS6hZ5uZkJ4dhoHQf406g2OQcD/GQ5XPpx1tp5KDyIlbZSSkj\ndYDcQfVAEAchfxyM5wr3vtVGk68D8Cv5TGtA4gB0xYRaCjhOOztD5a5m9Atf\nyyfPpoySBAAkt1q+6mI1vrXXAuGwclD60NdkRKvgucypMW8IqajDXR8Wmzq3\n+456F0ImMuKzLWWs2JwM0b6vzewvOvy7iv4Wez9SX56N785rvTGeC0h0m8wQ\nNihBVpLDZS+p3S6fF1PWnScoK24LpLuQEDyNJ+0XpHIGSSKafsbOjgjajzvJ\nSmEx\r\n=ftfL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWlIcYAXKyudlerly6aUQlixWugyLJNOzqrbmaGY4FSQIhAIc8fJwsb3ZkLMRhLB38mx3T2nG+wtl7bNGTVTLlnejy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.758635ed.0_1597425390151_0.057065937339069395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.18d6b808.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/top-app-bar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.150f427a0.0","@material/elevation":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PCoFyLgrUrzNT99waxo5OXSbK+HWYpROu7fEz1f5lmwS2kJSeWYc3R0ARGGekDXU2GkJFkgajrkerB4mN6Axiw==","shasum":"2106f64bc474bf5a964f96b06d516d5b319a4904","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.18d6b808.0.tgz","fileCount":20,"unpackedSize":83041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlNCRA9TVsSAnZWagAAdgEP/RiZ4eHGAsIleGmMcW+k\nkDeoVHOgGIBkvonsUur1kPFE8+63bFW4ngvV4ax/kdKdabNF4uAYNMmMQBiI\nXjyiU+T0QMFz8tDfFeduBenY+3GnXAxL6JycffmvzzwHjAbfQlD/iF3Tgy7b\nt5oPeH+Z5VeLM48gOmJEYR2Yz4V/L3PLbPN0nbiugMzvG3UkiEUkGUik36F3\ngcUACb8Okwfuj9EXsf3aBkv86YdND5jVbRAsZ8QRdfJVemFX4qFDSrdDpfJE\nn8g68yHwesiJjFBG3v4LzqN+e5mpzVTS4GrNerhFGZJUjQYAB+HdRIGHbz1N\nWEQ5ir2AMkdfSI/2i5JM2onCRvoCStHltjmLmDd4b8JeHH4tFilb/iiCyo/Z\nIFja7Hnfcw2hQxWrqsoYJQ+ALs2Sk9IGL4LWsMSi9tYJEIVur1JUsPSjdfGw\nSIBF3jTu67iwuIGusKV0n6y7X7iXAKYQQbkYMqeoWez7yoXjhFhexrVonr0a\nP4XHxUg7oq1PvEgE3ZSECQaYaZL+hqbYb3sPWV9QjwBSp7fKi/JINoj85a8H\nOI2Uha5Ut4u2NgH1uKMPatxv0A8vAXvjLsVp3Vo3VNP8HVKoUXb+D8o6LLDd\ndt2efvhHn5JoVc9NWVqI3f606CgJwHrtC+GH5yNPjdC8M0OhA6mchR9crOxj\nsfQe\r\n=GQmr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8BeyZrnrsnNlHxBZwPlcyxJkW0GHK+a3UhhyOIa3zzQIhAIXdeDkcl4cVD28dkuEGHpTs58QK4215XEiBeQ3BDGoH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.18d6b808.0_1597446477272_0.9578192856856813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/top-app-bar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.150f427a0.0","@material/elevation":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8pCRKyQYv88mi8Jfk1Z5VXuuH0+KcJRu/gqX+5ybBXmID3KoAWhHeNfGmhjmKMQKoQBHmin2w/hB8eXWC65umw==","shasum":"4587895a560b77025005b09c996731fb21fcc1d1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":20,"unpackedSize":83041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwF7CRA9TVsSAnZWagAAxwYP/j5wVfwKJnnBYjxOEegI\nGzaeyWbVu/3X47xZy0G68o4TUZrL5mN3+BQ5qI9B8Hc0R8maHTwptoFJP4K+\nD1OyIN6TMGGn0C55fun79JP4FF3Ee3rsALTr868pxHKUVjPZrz5pHAyI6ZoG\nk6u2IQJ/8rKbHRyIe03ndc714ioXlO5q7YDCe4uSehHUrCHW+uMMCaqDVEDw\nV+cPwnRPz1ib2WvAsceT7sN0nC035pCFcO/CFOGh/krxQLhlrGAxb4XFyxCd\n3/ELYf9EZvH0IGyU9rY/3bpWDgvNwNvJL53ODmHRQU5rqjsoW0XMDzbjs2jT\nSNelTQq/0VnWKp/O/mROEAvngHyJV3ag1kBY2LRCPvkxlK0Jke4oZNGNyIK/\n8rzyVx4qdkJRD46EfCpZ5b+3D4Ojp5zIeXHxu1RMsYHN6CCap2PBsBflvNE4\nx66V1HWW1QciWvkckXpYkXNTth8EO1Us+K3x6Q0DJDk2ZUtQiTeOSKe1qLTi\n5inpFeFKdQuZciI6mZ+h0Gx6JMRB7MhkXU+FjjVIHMLb3q9NDHUuHzQeTN3B\nOVTa91z2Dq1srhpoodYdcVUKiUbGR8xemf0uM1Iv/SoBRhBZE+pLSY12r3X1\nIPKGNLonWgpTrCzRgXZYQds6kw4T+sNiYIYzCoMY3MBRCAvX5gDaGJFiZ9+y\ni5y/\r\n=6STu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrFnd3FVatqDxpicEsQUSrclRUjoSufitRDNoTIkVKXAIgXBWHZ53NY8z50WibEV/1rGPhcoNGuIWPXmYfyTIukRw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.5f8ffbd1.0_1597702523373_0.74575955641301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.8604d59e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/top-app-bar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.150f427a0.0","@material/elevation":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RSDzd1ePXXEZ4pPmRVf3rAJUKN7y7jdvsPOIc2XRTGZCh2/HdVMadJ39ibEC9uPcA2t3HN9fVI+SHObKLySDUA==","shasum":"45da19991bdf30a4c8c517a9e0e3f6ab087fca28","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.8604d59e.0.tgz","fileCount":20,"unpackedSize":83025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyiaCRA9TVsSAnZWagAAxooP/j9Ly5bzMvVKrCHEdtFf\nh55Ae4a7584AeUuJazTxoAM8OTYS2NKnMf/x4Te4QQ0XHMIM5EzjbZHHhVBM\nBJME6Oyd8Y08nCCFwIrUx1P711kHNRyU4dY727O/AH8tPSfIbMUcOb7yPW8m\n6dxKjhM1vUvO8yfA+ERzWllvw6pZKvyxXbiuWToA/VsD6Bscnmvk0GD5f0za\nPTefQazUyDYlmhOzCUqVf/yMCam0z8c/XXwJQgPzBJJ+JQZhyDewCucFmci9\nGNr5zfxzA5PtGE7rkPyyTEKxnUbtffNu/oFLwAgwd/z9wi1muFAVfSnz+Zo0\nU/PXGUlOKtZLhQF5fh0F71fxWd+519EHc4Yy0OIXAVJF2a0S1mIsxJ2WIX6y\n3jj5/C3dTjNEoWBUnvmwcOSRa8G8TEAN3Ed1EVYs+dLHJuS/znd4U9caB44c\n2zUX2tfxitzVNhszV+Iall1NwItr4NA55n9On4pmSJtULjchFtzTjnOk4Pgu\n81pRfIB/NHEM+20+6NAFd1bw6qzia5rhOIy3hpNevCpa50GVhFE0p9zupMPB\nJzoygUuKdT9wChoKD/Z5JQLYhKdIrQWcVsWINp5V9nrzvfYT9mo0UfBs8Tu7\nbOFwVQK9c+78NMxQmXkEVMA+lEOJ8yVZaxmOm0CSpZObaL5+3VXNK25IK8Cd\nLRQT\r\n=tqLt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICzEYHqyYhO+EmQiwzDyrIEXOKqEmp97dMOsza4m0evDAiAXOkVv+/FTPsWv5qclo945kTcFohDIfpKca6iY6txiWg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.8604d59e.0_1597712537755_0.5967732783717483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/top-app-bar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.defa599a8.0","@material/elevation":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KhwNQB1ZcnmMcTqurPsisE3TsvQLd6SFjonRQH9dGrRzgg4jjSGUOqU1BRxuUT7CQrltV9HTwH0jQwx/QggGlA==","shasum":"1207ef45e576d47f0596a41a8716ea1a1f10de78","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.1d7d5e34.0.tgz","fileCount":20,"unpackedSize":83025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyojCRA9TVsSAnZWagAAQ8YQAJN21CU87/H+0r1J0c4E\nTZF7DAg9DL/MvuzoX0ke5ExNlckF4nbrtEUpWO9j1iPKrfNSgZm9k3hcShLs\nw+lhbpUa+NoGGDXEGI0iVO0lrk17YIsxUAcj0t6jaxaK9sAQ/zUOUez9ZScB\nlnzQ7sM19ee75qwelm98qWhw0MHeSXwri8NP23JDsGkmbo4DgkYH+6v0Yz8K\nc/ikAw9OltQZDEKgovs0ZGeqrQ9lZg6/heKF9ROptJtmkOzGNPxcoL9pphhY\nqFJlpOcnsUyY3L95J7oQ43TPeW80vCLSSXqh3K3B0blh7iLPYa7GKjNy0Nmh\nJpbXl6y+gL0RIZrHixYpVwPBeXn+cuaR9CRel/rEqoIwDYzi9OMlaN8wv+9i\nU2C5DVRv4K2hHlznwaAT1XDi5G4gRg/sFOQ68FxSSfgzItjLtyIr0hnSvUH1\nbcuZ0rZ3yWUB2Q/f3bsIUKG2ZZAlBad0B4QPSfbbxXBSwFZ5uGwXZ8aQyAXo\nKp1K5kJeT6Itj8Dy3zW3UJWeIAd7pYXh1wjJuwjE8elFN9Cssw6syPC8yrAN\nc8fyY17gDbLLCNGMvBsi08niar1zl5/u3/cIrKXb8mc2YStDeOcISvnmeTHg\n+fo9Lnj4cUfkm7SOvk+6zLb0pGc+criRiPWaJajH3NaBHiXIW2SLxB4LAFrb\ngabE\r\n=9CVi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVJQ39gPh0APrXkoqDHwBZvfGWg4jGbYc9leu1Shu6LgIgB12dCFv8VLewJQvHthEgh/YGtUqR8zj+RDgf9w08AQU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.1d7d5e34.0_1597712931449_0.264708004263394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.9cc95c07.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/top-app-bar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.defa599a8.0","@material/elevation":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LyWsuKo/AmHnDbEfNF0WO/AzOt8yrxr+p02kxKK3dSE3CRLuEgwbiocEDGYhlkrbrM99aY0bMMuE5e+7EXDL6A==","shasum":"687916b2db5b716992fdc20126fa3fa3309beee2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.9cc95c07.0.tgz","fileCount":20,"unpackedSize":83025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyvzCRA9TVsSAnZWagAAiyQP/0OVCCk8QBQEuiACMy/2\nRXfrJ9K3zVU4jZW6a0CRoHNKthFe1DhI1acX8p6+by0qpk46fyLDr3qbQUaX\nJTeOpz9iYf8Fs0QpFTsji9dv1sY07Cw8eVnc/Y33vVEA9jDMOcYtpbSwrl0O\nKkqCyG2XsprdZm7oI9onpCT5jgoChfOtB84qeCGN8OAvrhdy/nZIhqQ4AQ5P\n2Ewm/1VMTJ+1ii3JHeSz5oXO8qvX+Za5NXMOjAzfiaYQfUKP5kbeuV34cKw5\nJW1PEmsmjH/cFTZhnLjJe3v3UsECsvFu60TAOhSiWH8+fmWSPislNxtbrM+n\n/L4Q6dYVpeDp0cSXOwDpJk5cM55s0c75hGrwy69pomRqurJRPi+x6GVcI3q3\nQn4dy/LCnCMt5rZm2GZSGwYTBtLhZZIAnn/daIhE7HjUXJiRG7Yx/i+DMzbl\ngXL33pkh2WYtwZTpAhx1ttg2H8ZN/s7LGVL5cK/fTct6sd3JBuMRqeU371+0\nEJUcrLrz01727Yt8e8eeKHUp6LyrrrCeq6eZ7yBWRfGtEHGIXsXh5sAp/qUq\n5bTF+i+KcpaDDqBN3PixWdVE+/RCivwsYKNoYiQ49VhAHiYUe9psj8gEv+ZE\nA1Ycd3GUmOs/pqkv00K17ZC1fui8ssQZn9J/dqOH4KI51WChRob9yoUt2jma\nOfUi\r\n=0AwM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzmEdMi3z/siyZWtwBpQMfDRvZPsZqPzi1JQTGLb/ZMAiEA1VZbOgKPtTetq9QtskFPucdXMRY2oVgfNnQe+/Qt4pw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.9cc95c07.0_1597713394835_0.019413093467577136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.9f65ced3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/top-app-bar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.defa599a8.0","@material/elevation":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2b3vTNrYbm1pl3hK+ONHwZ9pvbiCQSCw3rKJIZ2vK65uIPPahfEJ+bcUOGKH7NK2UlFc6D9ajtXaEN6LKNUKJQ==","shasum":"e641e53c46d82ab87f85a0fa6c1d76d74c950eb2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.9f65ced3.0.tgz","fileCount":20,"unpackedSize":83025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcCCRA9TVsSAnZWagAABoAP/1kYr8OBYuWR6cF1KYuO\nhcylcERwvc7oMLQaZFFzDM1RWQwptWesGP6ksg3zU7i+RfslBGUrqFRbYUjj\nIwoWYmvSeUEXaMB5QygIxnEes/hZLsC5EWdIGVuPoCQWeGJyzdq6K5LEGWMJ\nTfji/DFCDMDKpvckOCXxK9VfQR2A/y1WvnF7ZpI2yCdZmysY9pPkTOPfh4RA\nbQ5+I9y7ixLxIsPd0LFazS2Os7vUUVNYBPgICYcFDpBmJ+torNC8URgIiMuT\nV/YEx87JW9ycGTjHULXh9np1ctrVl3huCwY/walzkkh+eQ6oA5vD90ZBrNhg\nwE6q/Waxdd4FV72Buv8M/hby6r4g36lTJG4hUj+6HEurkMOPa7pA1fQoVFi1\nBN9dZYwDpqgaPsP2b/V4F6xbavFcl9i/IsLbYh/4vlbC+mQKJJDBgu25pNRR\nQA/ItQ4Mxd+CFT7CDUSxdTyI/MYkhwbTkUbDHvG4F9BSzkSboIM8moMvkvYe\nN0Qp49xa0/uL5/o2hk71nuUdo0YAKgYuEhGRmI0+TFikubp0P+8W174k7Bf4\n/iysT6FHNSBHRGGn/tVSbnB65HdbXqrzarJKFZZwein76wia0OIvBbPUa50g\nxXS+P9UVQ+LPIzDahgUO5kVvHbxsVBdaGp5cyTr2TDZUyxSSUd+c39gDYSM0\n4UNx\r\n=9N2q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrQLS/8HBdc/ky3zME+QBOifWUQy/R3L5RjkxoRQsU9AIgQEn6aKREyHANy0RLPhafmwGsBjWuyoTwO5p1fTcDaJ8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.9f65ced3.0_1597781762310_0.44905401631035513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.5962b365.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5962b365.0","@material/top-app-bar":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.66b8ed7e6.0","@material/elevation":"=8.0.0-canary.66b8ed7e6.0","@material/theme":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8bCy2WtrqMO9mtd/sqzeD6rvHqjbEz7ovOE24J5VwL38jiB9N3QsUMyrk2u74dp/HcCOHbNy7lZhqB+FAc4QYg==","shasum":"0ad0bcd20a4715792d741317b2707ce3ab0a5932","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.5962b365.0.tgz","fileCount":20,"unpackedSize":83025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYt5CRA9TVsSAnZWagAAX/4P+wd027eEKgZ41ZCttfjh\nTPvZIUNJ3kfwBU9y/oeUkXgncDlSw3TPF5rjgyb8x2DVBX7ZEEGJz0HePQ9k\n6bbJkfxkOx5A4MPVtW6hYXcDuD/USpAWpi5kW4ytajb14lmtdy5acyW6fvfV\nfoCvdswp0ba7o8VBPF6HkMZPdy7wWu8S5T97FmbIv2uRNWzmi8GN3aT6Npd+\nurUCive8werxppcKAiKRlMjPOKKvIipbezMLsEvAa9TJkiZTJxqr0ThK9zPU\nTfAkBBKP80ZB3ZWGzf6ZzK62E6VQsIdFYVf3CfxCJGjEPyKSAQZbBzCzXALD\nXvlvsJZPC7lBYYj5qVIxAvdks/uk/qWMrX9bthYZWenBQ5Qm9PeAITrg667H\nC4pk9CL0VlhIUyHML2FoBK0+qmQYlnpM15cUDIkvdugFvPQxFVzis4OyRp/C\nBh9YjH3BSHYO3c9nJNxhlOdCJtEr6WKKBEqze9XkR4jbrN5QyfIcGBZsBtIM\nIC19piyuqkK/tkp3SldITe2eny+mzH3RPxMU1kL9leYR3/dV4ZO38h2+w8do\nBCjlNEQAgiFe8GJzSs8sWTbFy/+aefTTjA3BpqMNcwOAg8GplLN2cyTb4XYx\nYokdc8pNlr6LLw2o7zOkfzDIQMkFntQmUPTO1sHVQB2bm//obIsIl9OunzXC\neN1d\r\n=EaC0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqwP7NGl/lStjuCE5/4vKc1PU3nS17Y4bYYrHz29FAXAiBqH6BAOOvuHpsVovd/DIInfy/3ZCsGjndfb75uyLYD3w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.5962b365.0_1597868920493_0.4494301498094362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.9c9ec756.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/top-app-bar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.da72839f4.0","@material/elevation":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GSJ3Pz50rmCcVaTjREt202ivCiCroaguk6n2pYpZ6+Y8iLDa5jS2RahoNIJPi5iVUibKi1WhrNx7p7Sqp31cTw==","shasum":"c9937ab0c5ed29a41c65029556730debda110d7f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.9c9ec756.0.tgz","fileCount":20,"unpackedSize":83025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsczCRA9TVsSAnZWagAA4foP/3OHFvk1zqqn04lDXfSd\np7dqycOghQMM2J8F1bKceaKgArVqK4bQEKxkBn0rTV+7RSLR/SOIEyyZmmla\n55GEefploSFryrf4p2nh5gN0jgkiLRpiO3C+BI67LELIwHM2wVcADje/SF9q\n5HkqZ3b6ULhcSAJkswf/XKT2nSQgOXfKl7dUjglNMLytW95Hv82w6686+x+/\npx+cnHLfiRIt9f9sV5At5n7McSd+NtCPwZUiQRid5vLxyYoC3yWzWMgr2ZnR\nXYpioL1EoD+mFeJXxvSSi7NB06t6xuoVGitPbUpmTkyGCrkIkC+Ra397fLYD\nxdg1Pnoc9hj0vpFSI1i/HneOYYEi5dbaALR02BUvzLaRSTObhe4Rm5x2wIP7\nOAwpXqN+EAHoV660MSYyThOcEfQST88EPMeKqDEYajL/9f+DIanqn3LGEk4W\nC2/iSdd8NW7A18oG64Mbj+4zKA7gDr4PFtD21GRWUdMceb/RtlvkfFDzEEZ1\nqNHfxBEIL1w1XvK0MtE0khldBROJ985lIqKYp14zp1+mvQ4s2IPriT89emVS\n5tYgFFij1Z1/0FTSu5fXIdN28DtF/rZ4x98aUwzYxjw+GoeGabtIf8+Cxzc3\nrWwI2GaThfTEQojW834O6D3Xz6M/a0xZDQlfuf4jnylf0NnQuMG9rvqxrdSK\njyCG\r\n=sz4W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs12mup9/d1TfbVI+rbr+5dinuJYjQpcIunNa7IHb7/wIgMAv9WnEqY5F6MkXmpsq44exgi+bo4wQdTChLevvMt1Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.9c9ec756.0_1597949746843_0.37794752492549444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/top-app-bar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.da72839f4.0","@material/elevation":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-29jT9Ade4Ll2LBCNhOhwc3JpC0fU9x2oPrKCenN4f5cp6LLE0J554dl+BkSUpg0herGUnrGse1JJZtFfa5hBRQ==","shasum":"127ba6da2fa88f6a9bbcced7aa8446e5623b6c9a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.fa0ad66a.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt5uCRA9TVsSAnZWagAAvygQAIhD2GUIEfSr7ys+Fpsn\nWJmJyvcD5ryNM63BbTxy0zWdFlGefWZGO/t/J84V9Y/8wZr2PKEObhW+5Baj\nvlEBoawh9Tp0MvofzJnndyhLhjDV95T0REsm7QPtt6n+rH+7elwsn3KjQLjI\niYbZU1KOoOhpJqgRQa+PZmLEz/xROfZAUxUGExeNzbnQRGKKJ/0vUpdHoq0P\n3otZo1e6K+7vY8pBhMN0Zch9fQSzDEy8SL4/QIXEkt8F8F16l++EQPW5NX2l\nyJLxchzb+TVLAaaiCmidEPpwHFSKpfnB5b10eT1f5BtK/s0ly6HOB7Mxg40b\nB7eMGCCOlRSGfEVVu1JBi4gf3e7J28v1wbmKnXoF9KPPDZcdCR8uT1QJboHg\nWWs+T0W9ypBoSgwrtGmuw10QQkiN9CRxhSkZ2QDYmn7UGC+MlZgSOSBGVATO\nbXuKJahLfnG0CkPk+a2rgE7N/mQReW7uk3xvP93HAyJ8XlddCXAhGXffSGon\n6HJDhtJvQlig9qOgEJKxJrHw3cE49QOHPQdKdoGuF+v+VyrZ839AP6odaQrr\nTZPecC4GAIAOa/p+QLAtZCNChJpkUbjqZE9oN25/5GZoWHScbF5fX3Kl9GL0\nCZ7aJ1TZaWKF6+Vq0C/vYMLmm+87AW6TuCpgFhjRUXEIpdcfYqg4OyeLG8TN\npHNu\r\n=JnVB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGdKTgFWclE4BdvQ+aLEFsAARrF3yhY30pSUAl3wXH9QIgDfV3elVnYM/4yrAYATdxSeC8b11VQg1W/4oT8vrN7zc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.fa0ad66a.0_1597955694378_0.9868841715403771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/top-app-bar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.da72839f4.0","@material/elevation":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Rt7/wo5cxQy3HVO85/dM5/h65MSpFjzUJ5Wh32AerWUSsK2SAK7qAQYRzUS//ZoqdX7qrZO8GsO/ov1BuYW/mw==","shasum":"482da36e20601462f0eefc1b86e4ab6e68bb07b9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.06ecdd6b.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxACRA9TVsSAnZWagAA84cQAJwQvzB3EYUyiekqeeSS\niXV1A0oQ4JDzgbjCOovAXHtwNfDCSy2WWzB2Wqye91jy01KPUz3Wt+IdgO8z\nw0Bd7jN5RNmjC4SNFKuiN8yGodWPtBRb6/UqNIOt1QV9cU0d5LHqomXgY1B2\nLsAvo2toxV8jDclLYeVoSn9NtOqEAwW2HzxU0/LVO2WLrw7YGceO6KH0+te3\nUmi9WSXQIkDmBJc0T5ta+ohx2imNAwU390MN0m938lTLsWWkfSRg6Xp9c1FL\ndpTJ8ngJtYT/yl96iXeSAI0w+NKiPgSpNEQ924RTFfkWQU1EADYhxiZ/9Kph\nn4dz/s/kz6zbbL8lim0UdNLxgoWzIGhcKROUE8jividnq5n5JVU1/hHbrUMG\nC4vDyBM365paQJP3HvuhTopGtpzmual9Elx2JqR6Etazci6SVWdASPbI89z7\nnYbuvIgC6V7u6gQfXtRUeZ13xHbo4A7GgOk2ghnuXaKu7zclI17FPFT/0UyZ\nfmwRcNLGByVrSDrXvWvC2NF9OcXnU9YwIr4Y9yyWaPxq40QH99995Kpxkse/\nBZNsCwtMic/OyMLqIcVY9MiTaKkgAfkYxZGFGOsxbiwwFNoBKwjQxcdb3Pry\nWFmtHjqV7wsN3MoB+Pii5DDijYI9Cro1bg9jdVPmaYytqLjwIzk+ulSZles+\n49zt\r\n=4szx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFy4aWmKgjh1WexrrcFw+iRI/9p+igc3IjaSB6Nwv43wAiA4i8Shv8KkPbOa3Ng7uHq2LeSY8sPB1lXQecq+loy4Cg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.06ecdd6b.0_1597959232385_0.599685015722901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.2bca2318.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/top-app-bar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.95e4eeea7.0","@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TPYQCojzwZbVUlV72sO5iJPhZq0Dk2ccvDNl2XlJxznubSe80KURpudk5gCEo342JeeHbGUEELKwB2ndueMr2g==","shasum":"f98fdb70bb91e5795e2623688a317ac9eafae871","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.2bca2318.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnRCRA9TVsSAnZWagAAuB0P/iBAsToxQaH1ny1YbFt1\nDkvYKsQk//D4wY2aequ6W8/csyDWy23nuJgTh8Tz4fe2KNhZttjiktTPrVgU\n6gS+q/cEViJKIQ+5rZcRRXgn75sOqBnlnGyL7AMzOMMRtEx5+G9Tixd3PoVf\ni0/148KkF1CAXlRN1A6JU9ugzb8wp3jclV1E2mVs026gwZKu9ZQDD4dC69C6\nF7UJ9FeuObLEWQBWP9PcBr74yvkI/L7gNSt/Gj9o1dOnqj/e6VjElxgTimw6\nEohHlzv7IrXA5b4xpLd1qZJcTYPiwjrsWBFKT3vCpPBr119IpNaS7FpJK9yL\nO0egwaLdspi0HIZB5aU2AEDg+d9UTa01Ix3nchh3oO83yV6ImMRx+wqSdH0J\nvmkAtMJbWeSQWZsKv52/WgpecuL5uYJhQg58OibOgSlh73939n6vDgmhJ4Td\n46WHVOZo5bP2P5AIhQOlDWgUtFEeZKzxXWfxwZDoV00hncBmYj5EdIvJLy2u\n1mL1LQr3zPDAX3IHtsT60DyiM2aRfXCKWZucZa7GV1DBe9AIhq0LsACRsG5N\ng0/McupOYXD8FvjggaYeSIKSAyKctEE+nNtynlUSMXmHd2Ano4t0e580tI6S\nOwhJU3ly4eHkAEXDtIjKYduk5+i0DjmxIt4Cm7gVX0/ruynX1atLVnb0Wrem\nBDX5\r\n=KKB5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj1ceWRKSPR+QUIJCz0ZzwC4Jmua4mrdm1y77MyS2GUgIgLIujTSEsjLJ82quW/HPmbS3UlwXJIJ9Cq+8AjMwvlzg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.2bca2318.0_1598032337382_0.5238136618997813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.6aa47265.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/top-app-bar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.95e4eeea7.0","@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Q2ilBS66tIxIqUeLldLL5s5nmcFI0L1CX1S/AxopIK3PBN37DsJ+uB3njpt7xyoYdn3EIry1VwqzMZIGjbRhcg==","shasum":"3187cd26008a45441a6ee4e38326ab86a098f257","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.6aa47265.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9dCRA9TVsSAnZWagAAs20QAIAEo1UswM95bnNLMgdx\nh+y2aN4gNPl0VoqhBJuq81/ubmyqH4hpw/m9aQBvm8TU7fSUI9onYI7vfN+1\nZRnn2NN5JYIHOGeLMrQlDpM5wvjdgIPkadjqJOIRLVXvhCk43KUsVDTMJpq5\n3osG3IGv6Apial/T4FohsY0ikjgNqX5Cb39sTGNUqSWbURb/4zLEfVlmplq1\nJqMPkwvz3GDT86YPVn+L/s1dXsHPfNaCFNpSwLdf+uibGY9FHGqRQ18/9lP7\n+YRAVw1ZTX7p12DN7J2mkv1SPakf0C2POFh9M3QK8FDXtkkzLotYMzHBjBhF\nCJd6uN5V/uZqZNV2Pw+GLwHd2iRtf4bfGkfRBrbkFwh/lcOART9iRhExZruV\nuiu3aIBtIX1UUyXbP/SbbiauFwNX5NCT0RbF8I5XD92xLvVcfOFZpjo9m8cV\nbt1ZX517R3aTtkGexcEKVj/5fZk/L1hEq0RE5Z8DoTiVYc6SWM7FKrKX0/nD\nuo6CTPZ7fShaUE+eR25+0deaoJ1+YnmUfhRVitzzZJRSGcZNfaoD5mhNeKlv\n4M3BIMil69M1AXxCnRrHM6i3nJtgK0mvpT2i3nWCNxec4wPxPmaTSG5HrjmI\nd8I8YPnYg/1uAIzuUobrhkffR5ooRpP3ukyGdAgdTmkTNhogi6WhOVen6RbK\nha/h\r\n=MwhO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1a9nrhaXMxoJu/tb7Fp/l41x7PXUna8Z0dW5V/JF2fAiBKGZJ1rsmkZn13ecCkpI83z3+o9d87qHzOef9lwBI64w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.6aa47265.0_1598033757329_0.3241118980285935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.e7202a07.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/top-app-bar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.95e4eeea7.0","@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0afeaQht9awWBdpcZb/C9/PgI5T+aYL1ETn0geWGZTQL//XRBdNzvbr5FyVtVA+P9UlZfIJREPvPxS9Cz9wE5A==","shasum":"8166113cbda6b6eeded5383d4c83e10a040daff3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.e7202a07.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB8vCRA9TVsSAnZWagAArdgQAI2dN7WllJLNYB2XBCac\noDT38tyrHj4qv5/IVT7L7E4ffeSmPsGMhnqN3XqeQhHga+7T6NcU/JFEhs/e\nOheAlnIIouuK5KfFkNC4qVFhs0c6Zji2VETo2XHW4E5o2ALCyusvmiKslJkr\nscZ5vaG8voC4k0YRIcjdP/6QVGlVK6gYHkWFppU4KSLdfupTgRJUE+l7AAZi\nWJUVxxeMBClwaeGA/gaLmZrIvI3mgpjS1T17AFfEhsR6Prva1Gmbtb5aD28X\nDKg3NRlFWu7kAqrWNtWix1tr+dvpvo5IgGSFPvDhoeFSx8ko4f8l/c336OxA\n41I0B3oW/rtZsqK4xJrc5TnLRRN46BSM8wzUCSXRPT6v3GsSpIcGc0gaHiFa\nt+bOBBg3DBpvCZfoAeXyEY294GlPUMS3BivaNoV0ZHCk9QWsiyi7d5D3bgHL\nU+4bet995+fTRGQq2u2YqGxnjy59ANgwlAQubZ7qJz1eRv4soQo3FMn8Fd4D\n5aQWvsQw/cWFGYK8BQk/SwzzBczSRCBREZKORBTCX0DFdhBqx/mUGORG7CMZ\n5KQ44Vdphi3tihFSVq+rKSYb/74GDaii0ta086UGy1+4VkFI+BN8DX2nDVXN\nygKWwVPVRxj6VpgMSIKEcFJlOZG6BTqfKbTtpgKSFLTZ3iDaDlZ6FwNJMWZf\nszA3\r\n=jK6V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqqrg7ea/7rIpiW+HuNcTSSZm8X0Vl3DpWbRtYyCp7oAiEAqYKp9n2Z9/UMBY9KpaT+SqvitVyp2Q91Sl+fWQrP/Uc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.e7202a07.0_1598037806789_0.39424710152022624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.f208201e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f208201e.0","@material/top-app-bar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.238216fc4.0","@material/elevation":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hLREk4s0rDmxoGvxBfTLKo8koJim2UfYRL04Budx+Rpm4PRb9u4xh839Hkwp0OK63s63WEiuJQRwzh+j7cZ5qw==","shasum":"a600443ec936125e73c21cbe32f30ddc2019592d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.f208201e.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA7pCRA9TVsSAnZWagAA2i8P/ArIpVsG/a5ZBx1I7lYo\no1v7/RiNOKfxMIf8RVGKSHJCKcZyYvXMPenu1uRUYS5qnbi6NlrHl0tKn15X\nXlhWeuYdHlQoPIbIyzqAXV1mDEjQHzrxpI4ng3+Yegk9kQ5fQbzDJll2FhGo\nb1q6bN5tev74WTemmm8H+abYPvMlYxHh+njsmmwZ/mFF+wzvJfh9CF0jgMi/\nWyzR2cunCQ8bCiCtll9IfyUrB7pDH8EwGwMO1Qp5ScULN3Q9ij04ecPkgJ1Z\nTmtq+uLsoYVMb/++mQUtqKiP2FswG+ER3QoGc51t77UtOLpV6gwmnsQ/BkfJ\nG4wfo8K1QL4gQR1I47dWPC2GmO1iV2VRUcb6bEI91gUt9eEBRZR0fQMHiKcE\nIqxrJuS9BTGHBYFA6Jk+bSszSYU276ajxwGdxcXUaJ1Rjoi/VU9/MqELt2ZB\nKKU7Zx3zYJTAH//MEfgATsmsq1GgV6PI4edOLZSfI+XVp7pH05ijGDzBjDbp\n/HIpidiM16XCyglRE3ZCi+BNePZvd3ONIQ2rAqPFvn2I9RTRccWm1/TwW1Vn\nSp0tZ/NFC/9j0//AMz+h3WaAMzP8COB+Iy2fDGfwf5FKKjVBUNOD6vM4Xh/p\nZNvig24rzhmqQ56tRgX+FDnzUJy270o/Uvfg9FJZFGz3zgyo5/j/IbVECl0Y\nI0Vg\r\n=8CFz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ9hZ6enuYPSo8ojZlmN/edFIJv0noNLdNmZfNLSUHiQIhAJvXe88rw+DnKwEBLZfsRM4GKHjpjZj7BaMS2rr2F741"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.f208201e.0_1598295784883_0.894378565786196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.14a172db.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.14a172db.0","@material/top-app-bar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.238216fc4.0","@material/elevation":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JYTQSgzOhrFk4pmVRtcf3l55UBZ2DbLrmRQ+2vih+/i08SG+BKaLjpTanEJSg4UWeZeyRbrU2OsjIR8ewHxeIg==","shasum":"6bee02eb530605805f279f9c0b09284ee3a7f279","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.14a172db.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrbCRA9TVsSAnZWagAAZ40P/AuIt9/pz2c2RUvcjxG9\nDYuIbZ+yX73Pv+pbqcFBCWa6FrN2IGOwRFuwnDIYwo/fCBk4G+UUi8ytWfWq\nwOifB9fQ8gda8UgpfqfQoschTwi1Qq2sEyy00U9Y0B0uelMgfYF33Gt7NT1A\npWJNqDNSnydaUuyupD0PsMw8QpvZyokTCBywfxnxN1ifYk9FFioSweJY42OD\n7Wt9G1EaVflzqrfWBsEs5FYGOqc8o864DvCVF7DfICxfojsE8yhKCfnIds+7\nL111QxBkMWElEURX6zSs/ALNNxY1wu/BA7PWrJFZbx3VV8ksLgHDD9svVKEx\nMRx3bf8OGLVPeOLYutgncJOfWdtPX+y0yARuuTvT7K1n9GHFa9d+tjnD5HgO\nP/amEBw9uTpAnKdm0qKeXVO8A/NENallU686pSMggTjR8Bhm8WYM0Jr+KVs5\n422H5p9MLbhWVUdLMWyR0tpB+YEytwJ9y2iBm/QrjkJMRYQkdk9FVaDHaBYY\nMaISCy9ak73BLI6dy6mVLdNK4O8abldAkOCmgH89HFe77X0LTNumcD1FTqTE\noe8NPN2r9Bmj1+ph7zsp5S6e21mhkbE6ZJKizkkSO3zOjEed6xq3SK9Zqi/V\nUevGVlzJGz5SefM23kdZ3mLCwt7Gb0mysONxkmS8tOJmcYq51I+nRu7wCG+K\ntz0r\r\n=eoI+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDR9ezfP103ibkTQILSwUoOnmz4HFjMt+rdR++ektCGRgIgQQQvMZnr7sR8rsR9M7W3OMJyahO+Y8PgUl7ZS+4qXls="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.14a172db.0_1598384858957_0.6774667935536061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.e6c1038d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/top-app-bar":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a1c65593d.0","@material/elevation":"=8.0.0-canary.a1c65593d.0","@material/theme":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6ceE89vuY1ezThKzOU7xdXdsCto2DeOPdhF6LtJuv3kcGdnvHSsjC11P4hQpmM2KFGbAHfzQijcbKC4ee6uARQ==","shasum":"800eafeb8ee4c95d7299f8f06bff3be56522bb2d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.e6c1038d.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtYCRA9TVsSAnZWagAAgc8P/2mwzqFhEx1a7y/jV6pA\nz2EP7kv8JIGueG3mmun5C+POI82Pg2B0vq1TNx+kHJQ5mokkNo+1roJHRZAb\njpeuW64Xb6jfqApET60UBd9rn5X9rNW4SAzb82AtaWJO3+OEutvR58iv2Cwp\nQV5EZjH7iRYxPWT/Psu+/QvKTYYvJjwEEool/TDyHwHYZl6B0WDr0a/nEl2v\nJ2Ct9CfATRQi2vf1rpLt9T+1s4PlSFL5NtX0gKU6zJlKs2vrmlaVR1vorzSk\nliVANjzFqZoPwEah54cMjfHC/UQcB0AYr0Ts87QY1sQ4WltutqYvCMxXnzui\nvd+EGshfopzubBkMIgso3gvnzMVtXxmuh4yAbMYS6/ZbBwX4dzy2/kzMCJLT\nJxvwcAGOsOyhmtokDfLWdz5KLorFgTUw0a2WmX4fiPv5gA8lSKXtZVsyGiDC\nw9Bh8g+vkFiqmSAWkDSCOJq8N6mY8Jr9eqcxmrJznGzUWP3wWtvolnQdxCdu\nwL+K8buJDhM6/PvC3VE7Q3cXQ6dHCsMp3w6/d+oB6aPN2Js1DBvnneymbkvH\noXTsqCx9uV0/JpwqLialHAAR1kKrx1DP683O2FKbh1Sszrno5gnm4qvev8yE\nIhx57ZtUkLnj8akRvYY16vlYThCTQwoMFZY58HElSyaYSz1tryfmyhNJw9w/\ndwu3\r\n=QKwH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/1C6gDA1UxKDmpUekqn3Jgfijp5we1zpkdKqSg2y+pAiEAk26HfnIG32DvRxvNy/mH15GBzbFZGEJtvbfmZB49bNk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.e6c1038d.0_1598557016247_0.25725747877567895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.34012082.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.34012082.0","@material/top-app-bar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.238216fc4.0","@material/elevation":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0Lt/ttIfTs6pN9kO7l/EYqv8ohAzDkGFeEpp10asOHr1V4Pd/jqeK+WQr3wRBfj2BaRx3vuliaOvUDOpHbc6FA==","shasum":"a8eabf64dacac6b4225a4783aac56bea132a43da","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.34012082.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA3/CRA9TVsSAnZWagAAT3sP/RlVVXjuMtA2b+I0p05D\nSniKzXEAfLKLl5xlQeo7PBMFMPFRpUHjLhIJ74wJ10d1TV89hF7gi77UbAVf\nGnDXAraQwbFiN+Eecwa02NhN0AIDYAmCCTISQJcOYmZNU8xqj9wa4N5TAknA\n3NiyBZYJax+pTgk/GiWy1+4JzQbS70GQCGdsoXpof7Pa0jKVsTQDNUeDJkUT\ntxX8FXsPxNqdBCm7z5OeTtjWesMpAUtbWEinRtqUYeGJC0vMchAYww3TL4AG\nBXeJuFAZ7ClsB6J7PeGtz7nqpO74kTB51CHLMEeJ+ZfINXKQ0oIHIrUlTJYX\ncjfDRLnZ9ttkQhE04qWfpxEvC/ixVBWVrdtwz7Qr1YJzohcXaodDGJlikx7A\n5KH5q+g+KdkfBI9WMff3Ps3keBHEc6toOBNTAMnlE57fDiKEbDjXhlTxh5MT\nSPvZOQZAU8Ql0GlOPfTGW6XStwp1UdBlu/pNlT5IT7iMuQp4HIQB+gO1cmDD\njBtdnTzgPjFv2G2TM3Lq8iUUSDhqCWgeiOG8N/dBETNndNZbgGWawu7xb8mK\n35JE285SvD/K+mC5RYQtzObJpYFDiRoS5O9Q4Yf2AZlM4Zl7gWA3EEtskPKv\nSbaQRDbmXZU4z5urH4nFHh7/+KHqexXgwRJVkNt+4Mm9Z7XH9Uj45N1qism7\nZ77G\r\n=6uIL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEz7HWPvfs57pmJ1f4YNTZEThDQCSF0Jk9C1Um6+SL/oAiEA7tNrRbir1CHOodA7AAtHBHZgWJHjkafb6rsLpKESrZU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.34012082.0_1598557694829_0.22978672044501214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.c073f7b8.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-r5OOqRVMWzYs/WvywwzORO2LizePtb2X3Wr0v5UH8rtYM2HIi+PrJab+Q9slChC1s5goKZUXgBOhIfJfaCGmLg==","shasum":"f24677ab8ede1d78e75d7a26e3f4952972888f61","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.c073f7b8.0.tgz","fileCount":20,"unpackedSize":83031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTrlCRA9TVsSAnZWagAA/qIP/3iU0Y00NNGulW9RMHbp\nYCnP1txRVIrYL1CGufMv9mwEKjfQNYTglJBl4IFHbR55bYKRnx1zmZVOTEsh\nyALHuJU04NMoYe6FYHwe4MjXm29h8q1mfQidTq9+To3W0RBGdr4jGxK4oEwV\nCe7PeEdRMvtgLca/zV3S3rXaA+TCnBxexMPLaxX47eXYX0BZfZMv+80aXthW\niX5Utz2n5sQBApbBr3oWve17Jbic47a9TDTjtgRxYEyJhMzd29alkQj9gG9v\nrolz4IbJNAzzz0CzKUu6ZpbEyqAuvrQeYtlEctj7UB3H/fJx6e/O5xHj3V10\nsRQmF4kaJNBAh2ajHj4ksNjUxwFqovHCIxW5B8yI1iDENQWPEU8FnpvsAo08\nZX+uFeySfFe+bKZtRoiUzk8vxjd15qTWfncyAGUFXG004bbZYX975FYnXOv6\ntR8wKVBi78qsauqT/NBsD1cmlCtM8zgerpRysFHwFjG6MX0ToJ7aFh23QCkQ\nj8t0JumCiw2JZczpNp5nijpoqE/JlJqvkeo1sdLCcwr7WLEGdGIJhWUJ9kLq\nrvuSZ1mHoTq3QfLN9uI9/t+3sZS1OskfhGRHAqJ99nFmYIxAnPan16Qj8Cc6\nSk5WBiJbQYIvPcd/XPpdffBNIzJcKx7H7uKDTLI7mrlg8QA6cKCQR1Em2Tg3\n6a1B\r\n=nw0T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwrpkJTN3FGFpo2ULdDEj84w1JlpL8h2Y6UPzSoP4+XAiEAnfgUMHhP+vcGDnGE3c4bt0BQw4nJGQM9NB4OtT36rSQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.c073f7b8.0_1598634725000_0.5315395362040083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SiXB/A5ylEA+Zj0qSt+JXfAn4Dmarvfdj5patZjts2h0EkAh8Y4nGukMX+l735zLxisZLwXqXENK74REbAVAEQ==","shasum":"b06cde156a310bc15527e738e0b6390f19c0cb41","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.b7ae68ff.0.tgz","fileCount":16,"unpackedSize":65711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7jCRA9TVsSAnZWagAA6YEP/i/vygLd6DrCiag10eAR\n2ApQI6Uq3caf82g6xxdHGZ8N1zIul2OpEywmTm4Gdf7LjDs1svpQBQlu1kVn\nvnolTEtHvuRYu1aKtGytJWaSC0AnTGZE3gLFCyYyXns5XLUZeqCfNuyR8Viy\nNxLDmNa9RvCryZwLKpqrCQYJh6iRRLUGsk9zxNhh44ngsnZiS9g8wP124X0N\n7pr6RJ9BGTbJjj0gJQxkBrtekH2JsUcK5l0OMuIgILuUOhHCFBrFmtoTQr55\n7P9fRgznLFQChZ+TjAt8qlXadZRwHqwVa79GX/rkAJYvJywCLLLwk0dhWo4S\nQr99t8bxqAqQYpwcI0VZMlFXFmbk/qSOFtE8GyE6mNDlcyZ2iTEU6M6F2zmn\nxNE6wUfDNzbb1J7EaqKwi4fKnDSybzfZ+T+SykpF6Ko9oYduLTkhyb/FqAfA\nJe8pELItL7ibv+25SnvoS7MDBxEZ6P5Q99Li1yd71l4Xef0tK/p3LltPSvVj\nIEHrfTC9U0djBVq/s6PWZCWmOg+h28uaMm2qsuE9jCXqXAR5xniJF/svBiWu\nWGKLbccHvhde3czWtmEIcryJEDbF4PyNKafsX2vBetmY3+Eu06kiV6wwdmDD\nMJ1FpG6eENPToVreFARMSMViW3FTxJxJdIC1n97DIINJ+svvNp18H3g50z5P\nLRQv\r\n=ey0k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMG3NHlR5loc+aAQV+F/nGsWSm6I7nKJot96IKsTQuJQIge1f9c4frt0qe32GDQ/qdi7I35qCU+7MkbKVulAm4sLg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.b7ae68ff.0_1598664419480_0.6340423239744644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.697e3879.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.697e3879.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fRTcbhfqns4FtaE5JcRmcFEPkiFI8r8BV5HFjN9UWlntJjf43/5msXCb+QEYb5pAogUZvjG9puBk/N4j5txwYg==","shasum":"794eb897357df79a3b67951a5c8edf1367d10771","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.697e3879.0.tgz","fileCount":16,"unpackedSize":65711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOQCRA9TVsSAnZWagAAByMP/j2IPd/h6r03V1VoZV9e\nwzcR1s9x+7+Zd6yKUyKe2uOKHIRVEJbtmnmvTJpGuyVy4h+YjtwTpeU7199q\nWqtyUzkQYrCQfHNkge4TsmTC+BgYRRWBJcsWzbGjMjUmKrJwYnzdPg9zczRp\nN2GLqYJoEczEJ10HdujwkQSSQhtZAp9TqrVeKW9prjCRxz/iSPAILijMm7vV\nrz5QOfY/VrOEVPTKy9Bp95vHFJgbjdiwJGHIrdtS4NovG5LmCGfoohAuDaVH\n52Nvqokv8Q7eL6QjWGX7ISNPzzV6T2G3QoLgmEXNOY9/Wm4pVSGHaD3GM7RA\nfM6q/j2ciFlQLFzlgfx/zafHncqV0//npKjAHvbppkFSlTy48gt9vmgzPyJ8\nzvl3VM9rKBpFtMgMyMvl8Scsodwh9+fAPrNL4LqzhJ9UEy58dMAcvXbWAI+O\nHEcP1NQLwY4ospXjghpOArbW6v3Lah/p/oFRDc5v++fwhDLnszXInoSHd0v1\nlMtb8wR6z/gcAfxUKFS9ZUqp/ei7EMVnFNCX6hxMLc/zByXrD3mAvoC8q+cw\ndSRA7fcL9RJmX2r4Mh4C3rjBqvwO+pSzUbt7HTGG0+CMzWNd6ZeJ2MxQqqPx\n956Mp9NjNVTvcDnKDJRBDLTmuHRHH0AzteUVzAAwn3zw1aE1h6+fJDC/669O\nnBgw\r\n=fVGe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhsCdYXvwIdLOmyQe0l0Q38IohdxTrl8uJMahFtr/QxQIgQtb8mcZEdDTiDUCeAN/NDozJO989KX4nVC8eaIqkVfQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.697e3879.0_1599005584153_0.4179610441380519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.eafb7991.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/top-app-bar/images/color_6200ee.png) `#6200ee` | Background color of the bar\n| `--mdc-theme-on-primary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/top-app-bar/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-verpy5ZCDY7qKB2qnMaLleReVLHcGxRS/e5/F+doQVVncaccCw9qoI9Dw/G0/PwkHcNNfOZ4SYglmwZYrE+Eyg==","shasum":"63efa02079fa978c56aeedfd3fec5d6bee4f5e1d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.eafb7991.0.tgz","fileCount":16,"unpackedSize":65711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDiCRA9TVsSAnZWagAAhgAP/3FkqWgtMIr3sRTNAuxs\nBANc5PNJRw9iQ/FK1TM+9Fx1L8qMsjBl5M2DtbYl0r8iWve2PHzhDn0ah/b3\n6J9251RvFGiPjxq7QIrjRzjX5pKRdbgWSJyefXuh9W1aDBjzGUXq4FBwHLnQ\nBuZ2n97v/IdOmQQxS6yOmkxSziVX3tQIXqXONzLORU2/8jkuprbW/g1CsyLO\niD+cgbLac4skwdYt7RHpQ3DZ537blyNWKvSb/1EnsPIK06mM60m24Keup9nP\na+2dpjV8dXLzQGtYlIXTlztRzIE7JOMXX9tuk4smu+Z6FiPgRj3YUbmLbRPS\nc6RfT1tyg87ORk6hXPv8+HxdFDwjtQ8ZNXlMiHHK7pj9GSgTnQtkLuhMUlHh\nvtItKm+f4mtkz+xTG72bhsNneKXOAysTP41xNaX65nkavDgU+CIDnLNGgRmj\n4wlzKNnVejOwPbqzGjGMpOqFLcDt47LLV6Gy/X3+zbgUpqelaDgJymrdbKos\nb/u4JVP93uenR0H9LkwzTEtv/+/5T4AazmwJ54s9K/1RneyRzTCrNxD9oMqH\n9zH/9RbMazRWCTzgsP6cL8iQ4dX6wxIzOd4AtUgbxLoHJAIVr6wnrm146US6\nsFdQh30FrwM78+VJmYGngVnz/bNEt9gM5vAVCeFybwrVji2zJNTfYh6ZiAd/\nznsX\r\n=EMKk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrPpEkxUENQb4U+P/fyalBt6AedpCa4jadLfUkkeMKFAiEAl8iL/ArDHqoj9YJLcDzX/HqNm00mniKBwJPHvBkmhec="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.eafb7991.0_1599013089528_0.3303739066229636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.606642ec.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.606642ec.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-X6vlHwOLPuohQuLDPSnl2d2Vs3dd8Tvfo4jqCb2lP4NRAPgwa7n8PEt4kpWbFopU35/ZhrqcEFgaODVoAU/aWg==","shasum":"742a13e44c86197578f1cdacfc9a42850c5ae2e3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.606642ec.0.tgz","fileCount":16,"unpackedSize":65307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBAgCRA9TVsSAnZWagAAnB0QAIF43lBwF8/ZL3vqMYry\nCHp1Vxf7bdqFYncdVjDp3T/Qkfjt7AFrtu6GhrLsSjMpGaSOapeVDugqjTbR\nawyMuBbcNbeojtA/rCkLc7nLOM6EvmG2iDPCFvM1gxk5ZyKTdjot2hdObfKi\noZlVs0woH3ckrgKf12BoanLIDVMONA2kve66lZRVhC0ANJnGt7Gys6lpPxfp\n+f0GBOcdzCXqLGjEsChEV2SWdBa6pil08SJJS51TFX6e5OkhcEMjLhDEqxqT\n55vkbn3CvnT9+KqpX0d4eEB7MOJDPecwRcTIyScSv3RH0/dpta5OXvroNhD/\nMHhuIu8veDV53d1aPh0NyG9CyNNpbC0HnzOzjrFzjyP66sW6suELd+7YuQZD\nZag3Z/zu49CECVXDiecJ5wbBbfBZru6Aubt5oNQel5s0HqqpYiHuAY0KK3Uc\n19zYDC7P+wcUf/cWPsqaMcsce2eR7WYHSvSMCAXRwxLfruDGAjzWebP6X7qb\nRxWwYqd242dyCvnXa9klxwwPgsk9rc7VdTTkiJm7pfhIfKyaORz8v4b48XN9\n1qazgmA2+IO/XwUhCZJDAVNIzvp8p/n+wH8dJvTosv9FmfCAYnDDYKHXr3Mp\nlkKrxDHqTe+EgVNM2H5BG5ycm7bsfkOpSxqynwh4DkQ6dZPGWRf5veuj5H8V\nor9t\r\n=1x9I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBAVywrpAAA3dLZhjvW/ZfJk+Q2CUL6CaJOsQ7lF6XaEAiBOAelYIfwP0R+lAUQ1cbfDNell2gF6fD2nh2hHZQ4rXA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.606642ec.0_1599082528107_0.6983015210701988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.ddf05c42.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZrmUY7Q2HD8Mk+S+6iOtVKYlPyyB7Nti4iyyp6XOlns6nTylKTzgrsYvqGqfrD45k0wpUs3Q5otmfiXBN+0E2A==","shasum":"99758fd653d4d63f01d8bee50d6e40e680859754","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.ddf05c42.0.tgz","fileCount":16,"unpackedSize":65307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPU8CRA9TVsSAnZWagAAbjkQAIqxGFvqS7Jj+OYYQly9\nAjPryHeG8E63CJjpslWnr7l3SoNkJN5ixFbKJakPqezzLpp7cEn50puFO9u7\npi4UmcHhuWC4cVE2gDV3L4UaRgagYXDiobeAppydfzJ+IIu7R3+YJqSGAiZi\nid9nEeoJuwWhy9386XsHjzlN1TOpFCrsOTEgVMk9YD8bRnY2fr8mjbtnSyeX\ndPbANz+bHVi3gbZHz8SZ/c2NppQdOCMRS8pdKvbnqzfeWUDPB1ImQhhSElx/\nx3wdv8l6ouaKVxAB74UCHZX53p7IQ1iba7tbrCrg3D3k458isv/QvHXMhEmP\nyDOVZve4uH95ymX0bqfGWGlQmu/fb52RkX3EU1vO3K7zOp/VsXSBjygLUZao\nQzpJgg329x+DiofFwQe7jQ/GEEkCdcal/bfqv0d/JdCv/mJwF+k9+wv+iMoY\nbLowoJfLfxWp4+cLfomx3aZq5dZlt0Oq8E/hbKHvcdoOYgHBLoeUxErzWMUW\nkB76rgEL7eKCe34e7BeAGdSS2iA63H6n58qmtKj9FKZlqhuHhYHlfa0lvJnB\nigZUqvQOacqvl6Bd5TXdEEQmSw4yh1+ZsQXS049FTI/aCDco8s07QUhYp5R4\nr1KJm3w+ovm14+SlKs4OTewyu58HuEK6LZ8O3Pqx3JAV3Ihm0SC2ueXVF422\nzZ3N\r\n=mrcO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkwtLKw2rv9ErVd59q5qrWnAaJr0xTWMlWb0Od3YUjWAiBYd19dWxH+JGMr9NskyADyI21DdEP+aXkFaQiXFnh4vw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.ddf05c42.0_1599141179633_0.6635038876729862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.b889e6dc.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xcvN9yj1iwb4AgfAK2UFinb03wSBhF7yCbusQHk6VBmGxJcm4ep5kpNKWR1YQqiLlYK6+s3NQY54KbWvUkg0AQ==","shasum":"23623e879e04863fe9cc248bf2ef31a578812e76","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.b889e6dc.0.tgz","fileCount":16,"unpackedSize":65307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPl3CRA9TVsSAnZWagAALooP/2w+Vfa7vziZPh6uwPcW\nkmEeIB3p8oLScij1muys5x3CMQaWQPaye8kLnb5buix4/rhAYeJcmKX+nnBE\nxL31WqZy1evkDo48acxCaYU4rdz3Sno/SIWIEprtKAuWVbcPUC5DPoPT/IxB\nDYrry/k2xdP9mjjO8sqxDKZnNKqsXh8PcVNT6Yye0hUcN78+gGUxX64DR+CV\nyDM7lfigC2gJWjH+68d6WK7LQRN87EeydCpoaWANwI2VUHLS6RWQIc1ZPKps\nOiojPNVgZyMYoCZJ1mzR71d1t27V6/spyMmnJpovHK1XTQGxBmpnjCfVKWgI\nDmiF4FLGOoLHCpjPu6m5/Oo/mJd46tM2dXSA1vAVEb+YrxmYITtl3L5u64dn\nEHMIGBuvJglw3UWp/uspAZvQ+Rc1H5FY0k24kp+Jzr6FNL+cb52u/aiJR8GX\njGcI6Og2ei7ac9aSGqST9OG64pXUV0M/U3rp9m2VEzMZ5pOOzDiXWvHp9Uzx\nd2EGjmQj/kKULOew3xp/ZUq2vqe5BvdBdwwM8U6yOUi0XvoGykX/2Bcb8pdw\nl1hlGde8M7ahgaZKBkVzWV0Y2sFGhWIulehhYHhQncE+mte2ndSe+rn69t+5\n+Hk493W9JrckJUwSXl7HkW/+eNchV1FLu2JEg/7v3xxaBB+IgUmWdEsNeKoN\naZKb\r\n=Whxl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGvm33QqHpCbx54ObrZ9Ai292cWxumAeAQZglf8wkeNwIhAPcb1sMwdk4V8CFfZygz1Uh77vKD/cSBJfCcf8lpkI2P"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.b889e6dc.0_1599142263248_0.00105174508078143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.aabeceb0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KrlWpcHZVdC5FA3RttKwK0yU+Gv1WuATDqFFMiFu5sjUuJ4lh8w1pQdI5UEVUTXc5hBuR0y6+Y8TZvzJq68Hsg==","shasum":"1b9713367d451914d9234dbadaf1f00aaf9072a4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.aabeceb0.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUqlCRA9TVsSAnZWagAAVokP/1shAW0tVir3+sz4fdBx\nTkJ+meZQ0tnSkWpHjE6KAHcc949cOXqKHI6+okPBJvzp5hP2FAK5FvNAzSh5\n/Sdc6d+t3Ej2IPDXmUuHAEyOwl2P967vfVnXJpaEYCKmIfRYg9udO5FL0EqK\nfkSJXRYMGfYDgXF/y79SGLPKWz6GbEkp5IIxie6FyCkmrnJVfZCFq7XiCfpB\nLaYShuNWyxsiL9o7mqpXhsfJu5JSHzcdrJo/8/ROJVL+vmImXffyaVdwTfYV\nT0enBjbzTHy7C2nL6wzzC0lqIOJf7VMNM8GhXHPARvUzDVsX2YsvR00/s6/5\nS3nhMFAOxLgHbsDWOAExfotzKJ+7TsJ/cGnjEEuB7/3HpTPTGOtVFThvlIh9\nA3WGMTGz7hICrrg4/55b+ZPbjfL3DDedEiJTEMOOFyl+4axIRLDBveQ2/qF6\nobc6S19RcVkk6byrwHulbEOsWTmcLorlNlgSfc7qNjASC5WQsH9rfWuZLnO+\nXdGjZkVPbt/amiXOqVszkbEwWkmfHXl22Yn9oBh/njn3WOe/maz5RjBmWWNN\n7pjaQpeyHTBC+PAJtZoTUO7bWR9a/0wB5XLjyHabrmUSj9QnXyvGBWYRUxSd\nD4N/wPbT30CC+IW+2uAqwe2rI66Eq0LbAUb31F55wj9o8X8asqPa8sU6Rued\nFAbL\r\n=sZoH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7Wx23EEY58Zt34uY4pi+0g2u2tUeef8phJbMD5LYgXAiA+8CHiXTfjxjrzjHazKgeTApI4az6rt9HnbLdiQu4lJQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.aabeceb0.0_1599163044799_0.6532808558830399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VWp3+sWKMoqKVmmQOvhjOkyOzeDfRirY8kQ7iBhQCkTb3VJZAnNOAdmvLWNhvnL2kDjk5XMDSnNs+kjWKFFWrA==","shasum":"1a1feb04c171511412647b2d9fc35ff92d78fc54","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.d8cca3a6.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWCtCRA9TVsSAnZWagAArcgP/2HWgs31HSwzsc90VEH/\noa9ieA7KBrSAna++JM0qLE7pr3cD8HMkxdp3paEljcSZEV47nMNK+Lix5eGX\nU+texmBF5yRcPRofKNbMmFDKUZbdkByp5OpOd3Yv+H74l2ZSKEjtmQHZbUAt\ncDami2mLswXWFIkbxQHb/pPHrUwp0fDdHsQWgs0UeHek2AiSvp/67N3m4iqd\n7lTBxlZEk8tc/xjOtA2XzqArLUAhAGzB1n0iBNwjo1S0DnJugUQaZDZs55q+\nNATWgGk0DBKcomMpwnTgdcctvEyHrObRzflCeGwBxSp+BfLW/rnbKZ0Mpraa\nPJSypFFhAD/IvWP+QuyddgkbCT8rVU4DIY/NBmKihJbk6CyXJGeVVwG7BaqD\noOndkNk5IK8spJx4ckSnDfxNlAG+EcM9SRKB8QnXpVLHv+fzy9+h5FVF6hgD\n61+DURxCT8sGTe7HpM6w+BpL6ISrBk8a3U9ceAS4zWN7stNO9C4VAHtz/i99\nVSMV4zlnWCeJqmQgCXlBs2ANBfHIo/hwhR5krwX5pKTNC6nJ/XE3laSWvCX9\nyaqzq1iTZTUf1Hzo0lX27+GL1kkt7DIyk/itnEuoEimWFGEidZmuMuU3JcEp\noFo609S4WU4Tiaha4a1dldlLlGuwY5yAGlb+N6QsyIkiPd1CyK8LWfnEYiIO\n1YEk\r\n=vA6f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGtBQL4KCwOZ5rMdUBtx4Vh+FXISY/ELuKY628TRkSEXAiEAwtOZGcMFYLoKwVIgIDkvfgu+mif0HB4/3mE3IWvL2Hs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.d8cca3a6.0_1599168685559_0.018962866568591696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.26d34b2e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JJE3YeZ/ryMMZpuEcf9fBB5nzss9QEYeAjQBZpyRaiEDZY7aePkyQnjp1VOyTbHBfVCXmPXlzvI5UGBZg4YoMg==","shasum":"99db0012cbafce521c57c0560957a82216bee6af","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.26d34b2e.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWadCRA9TVsSAnZWagAAxc4QAJ3jQrOdtLFmmwKekAh0\n0zvAsVapaGqOjCefXMNVY4CWKnYonjRhe96HQ7vKXzLnm+lYR/uqs3NHO6ty\ntkZv3/Xj1ADe6UaxuF2Cc2Q7AuP4sKgjZIurBxOCvA+L8X0FdOUKwfUnebhI\nMLI3KZmJOE6IZRBw1ln9zyap1JkbRYjLABh5xatY0xuhxoGUda4cZlCDAx5N\nCWo21FrX6rSZqgJUdf5VNbaLu/wqcoe3y9w10Mv7dw6AFlQta+IobhCEZCpk\nCI6k0YbAzejCPtWLSvKxbVLaSo9JPG/e1OL5BDUJVqCjm8DS4oy7oJ/EejUt\nXKbkE76pdrzCSqe/zngEXBOZ6zHn0IbCyAOiJcYLUDKouhRxgV2QD+2A/aXW\nsit0HciPgEFeZRpKUZClVHsgl447PalDD6tyF3zdMgTd+Z/SLXvn/WjJQPyo\n9nTuRrpP2cnkLZ+y/pYQLq2PCYbgHBG0TWCNwCeeBKFcGosIGB1R03KwqrJH\nvIVhAI80pvhD1/LUVMoC8AoYbIgmOgO9Y2FfiuztcJParn16TOjPkbxAdhbe\niDBF0h995J8GTF95mNR2DDlsvGZmkivRRyENXYoP/+UDlFTlnmwtQ4WRlLLJ\ndQHzuGsoWk07V7yYZ/fCg7W99IJdFfdcgUk597eYLL4O2E33wTunSvFNU4Sh\nsfvV\r\n=sGMQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvnj2b+DuwnuAimsPj2Zd4qWWzDRUe85DQWVh1zX3muAiEA6VB6QVl8pY+q52kEB+mpP/7XUX1RRQK9Ye2rm4V+Cg8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-top-app-bar_0.19.0-canary.26d34b2e.0_1599170204566_0.7362584728026387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.a1c44494.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-i8WSQat/DBZ7pFUocFFFKyFvVHDKVbjFzB4rCPZFRQ2JkPd3Z/709DimN5chc3KVZpewGSRiKJhzhnpiOQ5sFw==","shasum":"23f07ee5ea47450ccac0a68e2a5453dcc3bc00e3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.a1c44494.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVIhCRA9TVsSAnZWagAApf0P/1c/tm98jvPeAYZsM9DQ\nqWIc0qgRXsXUeH1M2DxzyUO58zYEE+B1Ycrnn7KmYtyTppaAyKaasiEJnoPp\nhfR0rYLwsuiAaACJUkZXjEOXbYWyjA5tNLyDdIiZtRWE+Sh0Qr2tUkl5doFe\n9/TFvnH6ArXblrG4moISqgAnmXLUc14cX8ypMfmDPqlU1mhLTxxXEYo8zmCM\nIwghgRHv2Zms/joL6AFWe9242anUjCk9B79VtEsknMKIn6WYwSCTNRB598GI\nctoUXBANuG11f+/fCEoPTqd4POd+KHpqrvODrw/WDx4G1ksj5uXkkkSxVSaE\nMH/WUcy0OXlrth+E9lL/enXmB9il1I8sz6lVcK9CeLm+AyfJxAYJTyr/nz3V\nzQ12SJuUqxQp/ZovQxTSfrsX777Qes3dxMwcpKFPFZGfqyqypoa5KTkRYqkM\nV1l3RGNngAmnCazLp9Thv4NTsOFtd5ggSS5IQ9DSJ/ezZePzCwpYkHw1gj31\nyhgImtgPyA4AXQ74MJq0VOLvizn2l62xi+yUNi2eeH1VOW372SI+PN08AjxC\noHqZF9Q3ZPNByml+5cSMdYW0/f+VWmJQiMgkzYBnx0yme3gaWNmSyrWLoYeb\nLYwzOch4//A3juOmkTdZ10hlY8vr0TKsoPQh84dSu2C6lw358CWlMs+VcAsX\nppVU\r\n=DGl9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7nR8tnq6biAGmw0swmfB1HSSaRtiz0uCzfomDa7PMaAIgNUbmeCodafrHW05cf398AG8oskhdRFVdGWMkU1b8F+o="}]},"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-top-app-bar_0.19.0-canary.a1c44494.0_1599689248449_0.018582626180730033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eFMyBdjlfDTAUCXObehYZ0wMjEF/QgKVDXR2Zo/Rx4tAI2fNtPonzeHj0IJyncPbjAfoz0bSrtnu0ii2WV8dbw==","shasum":"59d276a6a4a019a2aa627626ac36b9009a93275f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.be1cd1e9.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlcbCRA9TVsSAnZWagAAGMYP/Akn+QNYq8erv/ud/7+j\n/yZRRuBrrN0CnnZCKOBtJI+xJEx51Wn3p1gleimC10OrQiTY5w8W7xhkB3Mv\neeuFekWkZgUYIKC28kxlh0ubq4PjsB7X5FhhXy27h73EAfIVfOhv1ePEc9dj\nvw70IdQwg5qsh665E5PXWvIjDcii2CTvuWXSNvxopxOmrVlnVRbMatptMhSh\nVoCkvQj/D5eVLIfZH2CW/YrgGnaXkmiQCF9BjyI4gDdTIEdZ0rdkh0xe4+4l\nxmsXOcxibLrBHIvMzAJivTDBzKQYUv01MlhkGVICnaYOG/Pbac3v/ERos5dd\nBdpwwX9Jf2i9ehXA1h0yx3FKtBshr8is9f9BWipU0Ij8ii3Z1XA6AkWadnn9\nZmKxt58cb0uI9XMXVZ7/D9TBhSj8Z8oBuyRHL+Wvh9xZpZjgdJsAXaP8+Z7s\nC8tOUNlpM4OCzYmgmtNJZtPaA+hboVaItMpyrCN60qbDD8jeHCFw+FApjAR/\naYHKbUqk1YeAxAA/ZSpXaH8TNfsPywTGFvZr8fZDaZUyA39etqmQN3S/GLSY\n4LBDKuPtSKA3JpEikQ/q9y039stsgS326Pv7wHf/77zuajhOGJfQpMDcK5ep\nCK2bZjLY8P8XFpoteW1gVmVJxLJfZWdVbCuyvTTXEGpAgnW9EEENuK7PEen7\n/vnQ\r\n=R8gQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3JPuMvPpXc9RI6pX0FahkN/X/ZbJcp6nCK+SVUBQ13QIhAJs58wvza7nLdDT+fUXv2ChqGAQFuQsY1gTIGf/ZdO7A"}]},"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-top-app-bar_0.19.0-canary.be1cd1e9.0_1599756058981_0.8128340562157026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.f094c0ce.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pLFbB2V6z5aRF4JWNKKkbxFWLq4U5q+mzk4CNg2R8/lBe5TlOOoxNwdj11gR1prE4lsBkuq2kzfKCxxHq83GMg==","shasum":"807546f323162df67f27a580b29e1f1dc0cd31b4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.f094c0ce.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQICRA9TVsSAnZWagAAsw0P/0kzsZUKT+NZFNlan0kb\nw1UWajat2ODdQrF8KYtQRMrwv9paS9Jt5ArpXEkXAiA5nMfGLw5NgLSbnY39\nvwwHV1q0xSvQxrHWKs/4hSOYI0ICKJF/b5YGZtcz01Nk0a0fxFljmkqy2ok7\n8/QuTHX+xE2kAeg1yIHx4g3AAmHLQXKqaj+cbcn8NGXnjnqd2oBqieVAHQH3\n8UA3kshM1GDpMCJO8R89pFEPmdziPNBYpL9UDLN/3KEg5suNshhvTmeJKU/9\nJSbGAhrdqhoufTVpnWZx6CRIomNDWGId7I8UqX+1g3hR+qdlHSfN9c6iNjcJ\nuVs9uIK6fvEG/tU7ug4dlHdXWw8tlkaJPPPQ2daPosx/L+6h0V4B34s4bvyR\nqNyidftByxDZQ0JWtkmGm8kiCqF3kUk1dsRpSs7HMDDBJqPpBS+MnS3pf/4D\nrZ3VpyVXo7xIpeDl7ezYRNTufwc5+WYmWc2CN4CysCOHD99P57lzugUkUUgj\n4WEDVOQ8FTIpcA/KsV0tfY/ybSt/mR5geSWo+WJe/4cnBgnd7/szNXcBj2VX\n+keEzpSHowKRIrbhossROqiC8TGtsL1fK9N/vRovxcG3UGc29jtJx5q9EiVR\neM4H9MhFUKu/3QBSL5yhhDaP9+5FRRQuJwBUvJnHdY3eivFfH4gcs1/b3WUR\n3FNM\r\n=zmnQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDP3JGHM0ROJ3C24TS+Kb5XCTkj+JJh865ONz99rxcvmwIhAN7p1WKm67nirDbQIDJ5XV6cZqKIJmedTckQZ9mtsEqG"}]},"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-top-app-bar_0.19.0-canary.f094c0ce.0_1599759367803_0.06838418062280449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.c1261e7d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-H632aTZ2KlR3qp7UfjZeQWQ4plUmBp4ZiSJsyQYB+LmaoyAw/TNZvx1DrEEhSjP2ea6IqHdm2EDuLukIExVLyA==","shasum":"bdb4ddb5d9d4ec6cccedd0b2f8f1f9aa9fb32aed","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.c1261e7d.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBECRA9TVsSAnZWagAA+N0P/RFdFIEG87m9cPHTMGUz\nmXBCX7mYv7LQJtkwbTsEvy2WdzekqHbeKm9QXS5alYP8GfUO30p0G/oAtY4O\n+wlPPn7aSFETvV5TJL67z0uWatxksZBxVkX/sPfCG0H/ybTJFSKsN2rPt8i1\nsIkKzusXiHUAM/4c4xutVTApsXoB6A1VFH3XR0k3wc+QthEwr1UZTi1jvSYY\nuH3/4bDZ9p0NdnIUW32Fl2RI8UdBhZDQwgQia7/CoSprTPyY9EJnUbENsG2v\ntL1bmeZ1HnZHrtZcDHglEcElRkMsg+ymCqL5tx8QQyor7ltKU6jYNYx7yzCS\nhMd7KCm5VSe/BnasG2MCGWD6w6FubZbQQmDFXAeagCXIXQRnGsnc/r/JYacz\n+ZrWKb7P4bF5eC5IPmvpYCZr9+e9BL1rxf50gKaUCqfbdQcw9qpsgwJQfCCn\nXZMWIDlNrT02QKlr6RLxRJmErwnrCzrYo1gcGuXw3+Fwg2EufNHchO3Sr+Zb\nT/WLv1oDIYljsugU5lVb+s83sPM9Bmv3CQ0EII5J1RU5d32ihGHdj9pXmlmQ\nuNqhgOQYQNSpq+jGESZ/L9oX/CozXvkU0dI9BxR+q8Qi3QP4LWrSweDOBDxW\ngGtBTuL52L0hQZ14vB8WSRmWsT9zi0PXRaAO40QV/0DtRgDClCgp4WHMhdyO\nnCvD\r\n=0s7f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIElMeKZy00HueD8fbIlC6HQ6XUxsQIaY8DhonDf0WntFAiAwBH0NEBNXl6fy8NsxD5Ihfd/mqQe0q4ClLpP4Wgqcmg=="}]},"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-top-app-bar_0.19.0-canary.c1261e7d.0_1599791172003_0.6376839923090076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QYWdfrPTvkYV8HVsFBWo9gsh06a8APTIUgChl64z6Wsl0/cTQvjH+oYtqQReaQKE0KW1tb3G9OVVYS2SU2ktxA==","shasum":"5cec819dfd4253210d064ce400f793e3d76864b1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.9b39ed1e.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuB6CRA9TVsSAnZWagAAuLAQAJIAy0m0tAcCJo3F6MUT\nxkX5YXzmKRja3pdVJlGb5EuIEskDuEThY18ndRMAjo7bVuvcTgmOMee4Csn/\nEmT18VultvJW1lOrzSdDB6Pa5q3jO7UJkyaEWExxsr0l0qpg2slOb2GUKpls\nwYpw+sojNWxwZuMk+dFOYODmF2PJGFQOZiyLBPsvD3GUYe6KE+2hDi127vsm\nuv7eItm8U0DigbsBMGMv/xaxDMWBqPhio/Grvvc4DvgAGMSzgpUUIauqa0Ky\nqZ1yfjX22WJD3SXJneWGy+I5GV0lpUV0eOA7CRCUBqYUORhow3y7tTwPKt5/\nshz/icivRQ73m75Q2ET+db7MXlni4yLN67LOApW4UIyB9z6n7wyDf8aZgstf\nkDpAetInrHL9GwgKfgWx4f02wm3pCfUvdjUsPW1CkDDYT9fNi6wa+a3AKKv+\nOUP4KiPRzgsKQIV2/jpcO+wdHJcUGl9J1jLfTWb8JiCnEc1Bbp/Ij4kVI8rL\n/zP5hXNV54wuCQNSrgEyHdXX/hQBv333jJNWVrm0jJsS4BsijCxcSnJPRQ8V\ne9QVxWyRW4adoJ0yv2y3OTHuujY0D0EcU29ioT44GS/HHiLcxfRjos/QLkzT\nA5SX29KZkBwYYmd/LdCrC0IMWmlU5uxATn+xaZHNIKYcPQfloigU40cxUxxT\nSMK1\r\n=Fx+G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICiRTfa5oVQeiTHQ9QblZcCL6brPIU6Jbyf8ZuDhbXQQAiBoleAnD2GLEmRvplaMAbXcclUyh1uVZnq4XAcUAEB2Sg=="}]},"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-top-app-bar_0.19.0-canary.9b39ed1e.0_1599791225673_0.5125931076476578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.e67214b3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rOOy/3ezImULFbg8CZ9ZoGsPfry1H/c5pPzFTSH3b+XK4lSpZxL9MmrgLJEDC9kRPvpHsbLtqd6DcbGv8ztA/w==","shasum":"205b4f34429dd529fc27ce101b5b5787dce08a1f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.e67214b3.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuF+CRA9TVsSAnZWagAAyKkQAInN0NGR0Jp1A3imy04v\nHMMQHFfJF7rHzU3Y7Mr3tV33gcU9om91xbin0iUm1EaShiQwpYz79S3SQ+RM\nTi6Eivk5G4feQWNRZPrxP9zWTFMBBYIU2j3QYGn4i6BlXk/0mAbBKharEpKl\nvxV3n9ILJzpFzkRsYEZxX+AcxcohjTPosPNABi2+VcGKxmSYycn+gLm7Ve8h\nMfODDozEF9SJf2m3mVRMtSLlSqAZQdWb9yCRMAqyvV3+QmYP6GBRy0a2aDuc\nAyFdQ6HwEQ21whjxyWg3aNK65az7IasR8WM+OkWbu1hmli5SX4Xo1H1RumeO\nD5mIy0bJyD0EZ+h0S+5nOJbDH4b31mxNGu0T3rb9Appl60b73pIiUh9+LtF+\nlI1j5OzpTdFVbZ47/GZJn9tCULNnY34NTTj4RmALesRYPsqzJGnc/h++V49i\nwYzGl3giHXJN1G7wfF40B6uihcaR+ZDE5UVRmAQoZvJKZ+tFmWsxE4yS5MKM\nfAl3FEZWHIORaAADwm8KzQbD+5G03FedNeTrsRwGXJ0oJ/7UvEK1BZAu/Nti\ntiV4C6ZTr5i0wjoAq4AlJZIuqv37ANrhDfrpWJEsZXDHHpHBramGSXEwO66g\nIUFA96Dd7BT10imj1sCh0v/gJ/+hPwIOOUyehNaa9/bpR/I9RKbUI1qltiDs\ng9va\r\n=3QFn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCShiZBByAakAWq4EwGtGJkRQjdHa9CjYOGOSPTZkbFvAIhAMxNK++ri2c/jZxeYfSrSGv/3fpCpe+hHXWHVyvR/U3F"}]},"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-top-app-bar_0.19.0-canary.e67214b3.0_1599791486020_0.5250103917899513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.36f5da28.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6llSYoPjfiiFt6KPfK09x8pWuW0M/HpZyX3ivAYxlpQEfuhZHyXiq0QXlBI0KrLls1zAYo8Xs805dKMEGs8XWw==","shasum":"1a9aaa6f55ac7c6e7d0069333697522849417de0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.36f5da28.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIfCRA9TVsSAnZWagAA8JwP/jdwEetC5OGywQAXPE9x\n0R4Q/qZ9cf2lAa2tLhT2BW38akDhltUgZwV3mGS/+Eg90dCgm/zD9aTaYpLk\nuHGRw3mB+MAAy9mtU70lWPjmgxafdwJOiDY+J1esQbguHq46fwIh0nFhtmKV\nxM1ls0TZkYiTc5XD2J3132SWbLuRxbIKmnXqueGhAI9x40QxFnOr2Wjr7otJ\n0GmvuKGIGWQrH4Auf0Smq3pIRLHJdkWMGeBkZoHDcjO9relcf6LuUTcmpAfQ\nLev4asIj6AnD/ej5BdO7LH213QWXABC+ZNpShaN7MkOHTikpgzNP3vc6I5+B\nyYsDRKSqsTKkKaiDBkqPhWiJnIiaiE8Xamaim33/T0ja8YVepVjvu+ZKNifM\nSrXtV9aNJbyRjN8lPAoD1ULOls9Rf4eH3gX13tPY/xotVwsJI3WyUm8OFVyd\neat6WKHwof1/YUqtmAgj0LmJNdq64Izim9m7gEK+l9RhcsALqenX5TcGZLKC\n5aS80347GOGQ+CndorKxTKMnNGX9j+fOoqqWLImu/ektFDD+j6NkLUrJFY9V\nYzdCwlQp4UsRmax2rNiulsumLpW7lSs0FlIbryVE3Gjh3XGNMy/NjJP2ST+z\nvA/v/HB1EIa1qgOOzK0euGUsDj8Q1Lf0b/k8FDYaeEUTFD4t7rtTSM+7eO6o\nrnSS\r\n=Wn2A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNp56BI79RNCZ9lL0njZz94+q2M6tpCUVDR8s0is4qYAiEAv3wh3U+eAyrmpOzGfxf85YO0ZGP/T1zYv/SEMezk2vk="}]},"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-top-app-bar_0.19.0-canary.36f5da28.0_1599791647122_0.48000393049412304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.3babab12.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3babab12.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lZEFVfiBLZLMIXRzX4q9jvgDC+369mvPWAQIFxLRpus+5r+dyKsOap+wRh0hIMEE3dfeec9Xfmn+RitpZLurDg==","shasum":"8b7abb84d0f7839462595e5dc00f33f5b23b9610","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.3babab12.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLMCRA9TVsSAnZWagAARBsP+gOacpTInu6qUOHb1Ddv\nt9F/kb0Oon1HZtmKt4cucZ6QSsqzoqWafe6ElFKro3UdREYnGjLljJhzgno6\neFsWiZ7vFYfO+2ULFUooeKSvgDu0MnlSSgm0uxkSgeftvSaKi+DIaFDQ6YIP\nsl0GMCxLZwcpiEbNOVqdXVg49lTM+Poavps6mKsKXEaduBH/EmpBLJT8zjV4\nYgxYBgJGBx84Kmz+BpRSASxwo+KzoTxMocYNILatR93+OSeb2mRjHhoNWJyd\nFZnWkoQN1Y5lbi17T7CV67Ns7T8LTB30GwHxjafPMFXobmUylbxsLsQGoT6J\nkgkHBLaNU8kObKjPAZn9k+eTsd2IWbnyi73Mk2ScBfIAWOB9lwEpGRn2TBY0\nsvCZxpR8qjjM2fzanhJv5Y5Lnm5qHMQriust4VWF8o+xNm06fbTwyxdAPPIM\nezRUt37+fifRkfJas+ju6pTohii96ECH7ApTTPbBl768SVIjLwvannLjfYYO\nWOnfIVWv/pl5/EREBLf3ViL0vbFzzoVz3E1M/3MxHSO78el1nCKnsE5Jq9Eb\nWHVM27+4k5OQrcEPRbv+dMp5CYB9+TImjUEPyBoYqPmYfv/mkbXQG9SweoNI\nQHfo18C40gWFoyKwN4vTw/+tIjDqLWzZa2vqfxnX3619VkY04vPgcGAhPy/J\nTg5Z\r\n=fl3r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIyGUsJ/hvz02rxWj1Ad7c8ONTwOn6TDYVag75MBYdiAiBR8p7u+ofQbodJoprPaA6IfxL36Uek6UHTyF+bG2fqVg=="}]},"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-top-app-bar_0.19.0-canary.3babab12.0_1599791819974_0.8471645420236242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.a4481e6f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hU1RhlU4R3PNJedhifBboQau1dRzsy7YLj+w+/w55P02D7dMc3A8EDMiFAiqiyDbrt8M0xFZuhalbPkiHZVYZA==","shasum":"736f2cd7956b531a5485ac7170c7c6abcec53f24","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.a4481e6f.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuWoCRA9TVsSAnZWagAAgIkQAIXrOxd3zvoNJNyONdle\nGElR/u/tCS27J62iRCnoquGeVrs8MB70ycjb5DD+qABLYu0f1AqAF9AOdJmk\n7UtwU1T0MESMtqyBahhMZqEgU6ZVy35NVkTdIq/3PyB8GTkvU490OuiirPaL\nBMWZ79BfCe8LtVi04ThqOjGt9VW1KIvROFtNTNzwL7BmW2bM1nhsre/+sAoK\ndK50ao262U9v3V2TVcG0OJ+IRw9LO0prJQmmVWi4v8q0zt9GTmiv3m7KsASQ\n0Z/TkpWvY5qgSP62MLlB8TT/m6zQJnUuQ67RqPeLNzeo1ri39hlVc9N/PVOk\nj3MJ2UtoCStClI6n3BIujHkL8cY8pps5lXkxNtTwX4Ka6Ycr7JbGHJMJOHXM\nwkrEdVvpeL9F5Et5JMTGyDz7baSwWKRc7i3m4APkJ31NshlAduWbnmV2Y39z\n4EBhtmW9CL9xfTZEyXUz2eJPWTjp5b+gBcRsH3EzHQRo7Llk/bD44jpk6eBw\nVoyZPaeAE2axJJrMEHjqGHwHGhnMk8eaq6sD/nz/LuPCf1dppFHG25H66kYz\n8Y1eg8hImXOk8Q8Nngo+DFCwUHU3o6NqII1ZGOlDX4NYeG5fav2oHBcdti5J\nriuUn7wzw2mCxd8W2eUxiX6sZcImMw4Fe7iuUaEDU+/sl1M59Ch26hpdd/fN\n63q1\r\n=3tIQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1QMNMj9G9cLskwbZjNmAT5P5q81p0Nyir2P5VUIc0yAiEA/ipb4nNSGPBbVNak0QCNbIp3Gcp3E2XYQcJB+8K3FpY="}]},"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-top-app-bar_0.19.0-canary.a4481e6f.0_1599792552061_0.2974855843290196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.a9177836.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a9177836.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8FBQTEkhklL9TuU6hXO5p/047ZNNdawsWgyShmOshrPNw0I6bc2R1oKgqls1QlGqjlwRKPg0Lm6yA6wAsYZYmA==","shasum":"4a6f6157725b6111421501a9cf99e9844c0aff97","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.a9177836.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7gpCRA9TVsSAnZWagAAbBgP/3KqACKbXNnCXEalePGk\nDna5lc9mcJU1SItl7YVaapccOdw5tC8v1OOaZTlRu3rb/DTtcp5TWvVhUGiu\neFm0CUHUfGoYHtfOBgcovXVDh/bFxRaKPoJ2Z3qFv/UlfYkJ9NoyXA2o0Qlz\nXyz5uOZZ0PR0709ekO7ICuq5Wz9bd676Jq1tC3lWOF2xRJP7YYIztelyqWfp\n84orTu1MI9v0FF9UFcJW80GN94y6NMd3OwGQcrmdCbkAV1TZ3vvGO2/XKzFP\nNWOV0c/ctsCefbt8MY0auWaxMuesC6Cql0NNLNR/dDh24YPNA0i9yjNTybpK\n6g+dLCXSV6Xn85PQkPDuSuZh5g+XDqBdseIIv4Ym3uRrv6ixO19rsLukH640\nGxgO7HcaazQwSyVvVNgK0GPdchELFrv0noN5IuHQpZVEO3poqGfkspR4vyj+\najyiWfVkUnLsG6YuAFZSXCNnjxxDnHvuwYWW7r++B/UZDHf7uCmzsE+XsWwl\nFNaYwS/m7zCoorVn8jEM5QKxp3fZtDAE4sXZXHTHrh5VlNbd0VYLj91NPhhc\nbBT+bGlfHFYKjZUdNVJnF8qpi1nRcJIGHRJaiV3DL5HjY8zRnKAM80eW0LcE\n2TnqINgSAgKf/IAccO+HKYavPNY/YTUlufNNCdPAOPoh7P182nt7fXWwN3O8\no8ob\r\n=H1+W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2zCyH15NPEBd5nvOCHx8NjCqJ/zCPtkBXp3jPx8VkBgIgYw6o811tF+2fHRS2KjjTk4zlnEVbg6aeI4DgBvdoj2w="}]},"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-top-app-bar_0.19.0-canary.a9177836.0_1599846441158_0.8473673747150765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.b102a3c8.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/top-app-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gG4dfYuy/UGDyLlere6pBVWsh3yqYXVNzaJNnRJFQNq7urbTk9C2923srFi8f9ZiLF1ihsmpjunrN7NEcC6row==","shasum":"8579e36b7338b4d4d9ade89fac60a790ee960ae0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.b102a3c8.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87aCRA9TVsSAnZWagAA/8EP/2yoRMfB16FlQcUAtwPA\ntTgEqfZB0mctPN3/hBW9rwBWuFMEWNh5Ob5qeeD0rfCcHoElWh8VnBWc91yI\nMoaxLg9lRbyQ9KBmbLpWeLyEPj5gQyeZAy2R15bNdRl9T5CS4/OXpxKQq5IZ\nUbWsB98jkQH+h3InUFgusSj2WOhqPQoGvB/mooFZkYArnk257DV8k79eU5J8\n1lkh3iOeKQIkYJdpE4lse4n8JkRRy4JKH7/baz1bw2TbvetLUkVwnR19ZOSE\nOICUeIFQB7Pf5gC2zzsyDeYsHr0lSg3P1NFCP7DrnlAth5vZHk8BxH1GaiJP\nL4wSHM7XaakRJXazT6VfNlinUWv6Zv/2aHW+wDw0LMrPO3nlOhSFTcQPrKyX\n+AzhlWKDZTj948ZV5UGrqfIh4jNMt/e/AkVZFxnVZZ/pTnnuvjT/unGSEClG\nfeDRj4K7Y4tpM+U80R5rVXpZJHaPhDSrlHdH4PHNOy3IsIOWm+0MgHmltQDS\n1MW69+jbSr+wFNmuK8M+F1ytAtbTnkcM2rbGYM9ptv/B5BGruQnhGZOi3tfu\nrUoYrbnpGsaoNqZcjkQfIz3kl8mLu+NGusVagbT2vw610pk/p7m5CrPXHzxk\nd4/WelkFhz7+1gosa+h9N4d0tBfXQHHiPSMrs4uOzRgXPhzeD4JfTlhBIrut\nd9nL\r\n=K9uE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVs3f6Bp07APYENCSmaB+NzzhNqV1K7eiYm+Ow082g8QIhAPahY/j5BfWlcl1+wQ/R3AxOvqV3AH+1QXnpYNhOr0sL"}]},"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-top-app-bar_0.19.0-canary.b102a3c8.0_1600114393866_0.021526274250629696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.a7fbc707.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/top-app-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Pxix6+vWd2uIsjyVK7NxGVk+VifNnz0bNzmiCPSzl5AI/SuQCKnuZC1UABY2FEPRaNyWPzayX24mYX+Qslw41g==","shasum":"f1bc30651787c7ddadf4b547e1651b61e3ae44ed","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.a7fbc707.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZECRA9TVsSAnZWagAAES8P/RY40zhqauR3HgiH8Rm4\n9JnLYwbjbOrTqkiFt5FmIFF0h+xT+vfxqDS1ABK0VJSbgTGHscZe6q4v4EGa\nU7KdpS9fexF7eo7mttFIFNdbOqBOkVwUsJE/5B4Nv9T6rvhsWsJsHcMBUpXN\nBJgpvcGjmSccFc7G9gaPhtCKKwUKUIiTsXUwCKhNyjEuUb7XUQRTlsgEWApc\nhSlQ0nm2lvSIbwPFFzEKwxnmlKyJa19r7wFTXmZR/xlQm9TnZHZ8YKHkls4e\n0VrMN5345NB8uH8aITBPFHe2toYYsFpwQ5hx85+4nGEzqoinX5ma4vCp3er8\nEYujOzzzL6zYO9Jr8L4KVQ2S0WT/ishTW11pA1WJLbY4ohvSmuTm1Vl3drCI\nM15NZNYUeUp24HgtNsf2YpYL4vv3hEDUN9QzM9Wp9jRUUEAXOU2FDloGl1/M\ncw6fA6ozwBPgpECyv0uG/d0ceS4w9mmB9CBCxy1MLA5mmaez1uLt+IoS6LZn\nAfnrWkdDIit4HGxoW/Brb0jkcyQDd1nxY9HTRTzKUyF5B889LOfoQC1nOKha\n+dS/lX/d8VnuH+NY+I7LlgsX6f0uadlOiIADqoqGRRhXBXoZMhI451mf5CL5\nDVHoXh14gUjYen5+Gl5fVQZlK4Qsz3+rhhSKg1Zud75xbcug8M2NVEhITts7\n07jo\r\n=neZV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtOYsX/sI+Tx9j1EsdMa61Fd8Prjthx8oVLWgIfLhkdgIhANFQTXL+6zY+ZfNBXPNyDLCCZYJvq1CKLSErw2O8vpPN"}]},"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-top-app-bar_0.19.0-canary.a7fbc707.0_1600185924540_0.3026019076789066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.ed6b8660.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/top-app-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UKiyemtg1oIJy5AaBYhnpgUnPT1DMeEL27EO+Vf3qO4zQDUEmWKYFbl0qo2gPAFKGgQ7Az1As5Bgp/RE2LnrRg==","shasum":"e75220f2ca35f0129a2c26cc76dd37d9f8e1ddfb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.ed6b8660.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjcCRA9TVsSAnZWagAA0B8P+gJqeHlQ9UoqusxlI+4+\n9/ElxXBjfi3YHipPbrIT7q4yfLl383DXFmecz+xFKO5YdLjfFtDWm9bao0Ob\nwRFKh9dfo1Cz1viaYLmPPow6ZnO5+8z7ESLOlcFLkT4vOzSHRY3OVOIlP/yB\nssquqe/lMYT9LbXBEeCRV9vbf7LmmAzY4JLFQ16bu07++ImAb224JXw97Yuu\nQygw9eS8Fr4iajtVQbZosRuI951N0opVEXUGq0pWsXeVJTBalvy5uZrvYNrs\n7pKUeDev3RioTHX0gEhjMENu8FkmxuGTcq4M6MejPRAAcpxdw5JPBAO+JLuV\nDsQu9gbofA1lhgZBfnW9IhqayNVwLuIKtiP1+aNpJJloQh0SDx0n7Nco0UpY\nnHkEbvuYA0hNxY1yOARtk0azeSeSHgtP30cGztaGS5CLFxy9ll+SYlIu/v8y\nNGpJgFP80KPM5UX58OK3tFNphbjpm6AZR9p7SXkXapNyyadz9QYdMp+MH6HT\nb5Ds2+jMYZKSmEBTxuM3jdaQVHXTPa0ku+jlEqj5FSYOG2hGor1cnirGOJ7k\nCqlSDQQDWkR3BjA+LZdfBRBPsw2YlG4Iq2+Kn7UhygXX/xxz0+2MrCI3tM0D\n+F+CoswrGStiFZ6zcFTYSY5Jo9jURyM/xjI81yGdv+mMDoYDqdMJsDyCgPkz\niNCH\r\n=5Ghb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJQrEcKt/7t++91w/NIujKtPeBfaCe99KDQ9HpbPEvZAiAwJ4XRQvh5YsFgLnDe3xkSdH81/3o0x1wKIqp4FabEaA=="}]},"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-top-app-bar_0.19.0-canary.ed6b8660.0_1600190683959_0.7949084194434652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.9c2331f5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/top-app-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eY1y4LTMxnf/qRWFUvbJTHS34Yi+93P3OsA+qdlfnGIlBxDRRVFu0xUClJw09tMZmvlyyq0TRTVsY147gyiEQQ==","shasum":"e45ac3a1927310f8a71ff7b6059f377d0c270858","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.9c2331f5.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6WCRA9TVsSAnZWagAACdQP/1mNeOsASMoqYBS8FnQU\na7B9wFU2zX4y2mNCfuAXmA8L9KMIIcmHzo9aF5p1lBOZZzZL6C9ZSX81wWjg\nlzUwO2cXObXT09P86HGMfCC4+9iuf0uM6/nnNHVMfUfLij2RyBtZcu+A6+KK\n90hVhHS7DTf6VRaaO1cnLBU4h7YbkvVh2RGWV+GjzC2W4fZngk1t5msep0cl\nC+5iltZtNPcU7hbatn6/sljWGwXOmqCKARElNZAgFMCE5D60hQE1i5l7POGm\nHj6HBYtOLdFqQTEnYCAIMr3nY/+S4TjCmQjUYxsCy50ARJ6lxYTFb46SM7i8\ntPhrLxg6HmYTFesAWCd72kbkM5A86bNhaHlI6911kojynWw6YsUDh0lBLZ3f\nTdHh2ZBmUwe6u4ggEBSikeKvP0RxKLVfsFnLVm3j1GHH6RhGp5SiZExUG6TR\njWdEdhXwcYmMvvtZzeVfk5K5OtKaInUInPTzZtk946+iMTZNietMH7zy3T/g\n2PrJe9vsHdS61bVm20u44hmO+nha3h8CjP6Yr3kM7sll6AgI0qx6eF5jMmp0\nSTkWRgPL6FGQzeFAA0peH9EbbazZ7cd5cBkjeXyMr+Yj6BNKEJyScmggb8uu\nFt2xCohxwovBmsNQAf/DNA5xWcxAVt28Cq2z32f/fIm3078tqTZqYDGL48zz\nvadj\r\n=ILOp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE1tIRrjD9g/iHqCzshyvwEjY73GnP8IZVmKcHVA/6YCAiEAqYXY8apd4nqMGIf+KIT6mLc8JsSN9Q53lgThY2WMh0Q="}]},"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-top-app-bar_0.19.0-canary.9c2331f5.0_1600192149743_0.6896330237707171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.63a5f088.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/top-app-bar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a831d4799.0","@material/elevation":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5kZYw8t1bL+hC4dclGP4JgLo9i4mXsxOJ2AlPZyL6FALfRpn8TwNf9eUp3k8Gs8SoG0sha13dowaUOr8RhlnWw==","shasum":"6964991de791f5e360f46c30063a481c84ad8d1d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.63a5f088.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoWqCRA9TVsSAnZWagAAx2sP/RF3InAs2W3FYzry5N+a\nWl5JiZcMvYFGCVaq6greoLYidxQC2mLgPCN+1vqU4zHvE42eEnunFxifpvwI\nJB8AvvuQ0Ew7FtIe6zZZ2W9IIi9jTmuAB3ox+7rX0joPJzMkxdM/tSqkGd9o\nilzD3euoC2f3zVaUDD6CNqCspPZB4ADiKX9cOH0/DbvsqXodUHDJngiJVvq0\n28RK29lWkkng65/NGW+zJnu3dq/Ywe13ZXAVnGpaFo0FRWMW4eT6Hb3GZyGz\nTLtS4mhW45e7zNKyp6NmJY0LLCCgR5xDKLCLTo0P5R+x4MMyTZG/EY1nDOfK\nbyxJB1fa/136qxnZ+PJG/3b9YcSx5uYnKC09ZrWYqENjVlm/dAcmzjJiawG9\nCZbK/sxesER3C+ccoSoiXnvWtOXVOswxd0wLqr0mCE6QExM1F7TQ/F1+nQei\npNnJnDeGDT8JJWcMI6OkJNMjxsOZcOyMPZoiSr6opIPTKerMoQRyHX725OgX\nzuGyDPTri9LknIZI4yMhnPH9YmKQ64I66oOPeukYwSbCM35fxXu6tQh/mTDW\nH/gnfaWyPcYPKVUpUyFcTVodNaHLyfpq3GoH+SDHfNVzH+MlX8OLtwQ0argC\nFTc5Q1822vtvXey0EvoFyPEbKpIVkhu1HZcDPI+oL9WKW7fX+GFL21abTWjn\nrJyk\r\n=kkst\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqQ3CX+jTvlGlph1baphsA4K5I0MsWC/gC/MEjMQsQfQIgPVEL/zqYppkLCq+n7E9urCvPDEVV7No7Q/pID+MOJms="}]},"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-top-app-bar_0.19.0-canary.63a5f088.0_1600292266194_0.018099180410654725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.b7995e49.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/top-app-bar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a831d4799.0","@material/elevation":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fXb7GOBpIgryxRTtqqEnx3NDAms6TJV6LP8h4Z9oOSZTXVOl66eRwAW8TXWpIK4jl4p0nKwBXYDscG7c08sIqA==","shasum":"38a4f9d28eae1b4fd555df3e36d6c7a741316fc7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.b7995e49.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8iCRA9TVsSAnZWagAAmGsQAIoVOGIYqNRhrJ0k13hC\nEiBGVZIlZ6hv+iBAiU4AVvYhMr/D1d5jnc6pGD0HzSUVSGj48+3XLyxTpUBT\nzm6Pdwn5M1h0XuCB81RQNv+dCIweX5JzacZSOk8xYDsg0X2xn5H/SFSDrUMB\nL/3VtcV3uIQb58C3GA/PP2DpXO36nI352qs5m9FNWXAFH7FKpRU7Pem2/nqB\nDsqttlyG8Rwxym+hpaWPo4gGt6w0hkXzjXV2eDx+6E1Tj2BgF1TB1oBPNoiC\nfMoYugspQFLfybq/MO+honmvkcf4i2RbxVm4GZ71ZNvrhK4nGcnuhwWXIVHf\nRGPg3Gk4A/p2Gb8Hem/ZD377mWXUDaeXvS6DG3Z2YD2adKuMxQwXnl7cTBuo\nnLPNBPhe8Vpt4GeB4YTMlREBCcY0Q2EnEqZNAZtCevB4Bop44gjGp8BeM6sO\nC+EdrCtyFUKJ3r/+naj7B61D+j2h3IQiiksol+J2uK4E/vIOnr0mOYEee2ss\npuQfOv7efm+E0s0SwtxDgCWx46qLkRORUw/5hZPBpZGPlGUB775FyWws9mLQ\n/G8Epooo5V4Z0cNizMJwzDf9fgLb3yk3drYwrliXwXiF0lUcZaDGyQZ2T8RA\ncYuUDp63c7ow3F2Pu5pXbnH5zUsyLwIXVQ7N6BxtX5ucZkgk+P2BhNBADfKb\nHBof\r\n=rjk2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmaD7tqa1x9LCzLExC+vhPwLjQ2SE19lJYjrJ4zJYfWAiBdsyQP29Kq7wt7FqsWWQyWvcFODPH5BaNLRWoRel+6Cw=="}]},"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-top-app-bar_0.19.0-canary.b7995e49.0_1600298786468_0.747805289316039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.0da3ec97.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/top-app-bar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a831d4799.0","@material/elevation":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2KMJo8kNKdUI5i6m8z1PBlS2LN4SZtWaj561chsLk+Kd9Ie5CUbtjEpcG7zu3GaRYp6nOxc7QB24l/wvj7I8SQ==","shasum":"566005d2a0a0933d9f115786be5985cab4f768de","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.0da3ec97.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRhCRA9TVsSAnZWagAAEmgP/jeellQobuegGBN0sjad\nT2AEvgqXdFQR+AooHjL5brhYdrVBjofe4AH5u/sPR8Rg1fjyKyEr7oHtadoR\nCgrNBfLKkGezjgYYSjV/cEl4vKuAuzo8X9tlWqvjqduOjQe/iVQnD82MVm6V\nevyKkL0gH1Kj1mRl5ONMpSq27InkDB9bYpxnDnRw9p18v65uFL6/jqA9ij59\neKWJeiGoWdSQpdkCmsHIehEPC8/i+NM3jZd3QJ29sajoj+cf7ll7Yqcbin0P\njzaQmhdjPjT2Wl8q8AT6KYX4PxPCGX944kh0cJ2OEn3fHroYAhBZivrERQIm\nJedhK994GNfjFFXaXroQzgY4yWVh0mgWrD9lG/ShwPzRj/h0EqJcr7kpX9Ms\nchPSfavGLucvaGGaAj75r4gO8BXiPpV8k9SJuZ3MACjF6x0J2eDc6W0u0ZFT\nMPk7hGjpTMfMc1cOYTUo93ydaa4LwY48pTQw7QOJkcMjzL7T/jBRtEn/aPjk\ncTdS3bj0rFUFV32CxyUnUat8PVMx3ortPla6SFgW5B/PdaKkHEOn38L7STGX\n6zlMHzBaoBHbRg6HUb5rpB9Fhq/hxvP1joJrue9DupSgPiFujQKZSvKpaAKn\nZzfqpT4jmFrb7KKUT9d6f+rzwEeBE6tdI6M85IhMXHl4qnrMhNH6KasL7tFE\nCbFT\r\n=np1A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDzF8hhEtFjCSWD9dtfspbuG2C2Xai1UHtAWA0cIDjAwIgM6z+mWLiEzp4TDGCjQ3XUuZww6sPM40VYdLh7qG4Auw="}]},"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-top-app-bar_0.19.0-canary.0da3ec97.0_1600726112781_0.2523361387321619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.a0793c96.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/top-app-bar":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.4e5c350c2.0","@material/elevation":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-q97jmCBulvlJeG8qiF83WzQi1NMPu116ADsN9DfyJJwsFvhs81oN03TSInWt+0A4P1erhcrLo6lj1T7ZDshsdQ==","shasum":"1931b1022d4fd094b66c61bee4fc9a92eb26dac6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.a0793c96.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6aCRA9TVsSAnZWagAAVM0P/iZmnIKsErirFFJEkFwF\nxw+U9AkD/DVS/sdc1VFykKUNMxzdp6IAp1lQL6sG50K3gt0JEvwxSpdKEMdw\njsnMkvyeD4tie5S4pWro7TT+vcQ0fLzGTWXMMaozAJ1nqW22FtUqf8mFPF/p\neGu5jVsfXq659gwe/sVXJqI6sLiKXqcmbBT553GNwNFVDorkv7oKu28Cupc+\nU8lCwl1uPowAPeLJ+U6FwumGYf7uowugRzT7lkXIIf0AOO1U1HzbJaW6llla\nZ0VEKj5GpLel9nXzp5/0TOirrJuBfusCmyBK19wNTQuMXN2g/P/IyKFSHamX\niAdtvCZ6CZsilrZsBoSo2yvJnWIVQMOGfXESYby5j8Zse4rFanxkkOG3htES\ndVFF/fFwvLGvr1pefCMgBb1vfAvI7TDIJHYK4L0+Hmu3icUeTJ3VPRUk3bv3\n3V0yQTuoF47IWMwQXUZJ4uDYW80V0kv9UjgDAXPgMmHlHvLaHP+Onl/XFYld\njru/MLqYEZQ6J9NTHUc0KKzFQtQQC1e64otvMaTnhjwIRUXws9RsdcgxiN5B\n9/2M+muk9fTJtxK1WJWF87QgMCJoW7vlESZx9hTawLmRpxATO0/VEF2NFwmW\ndnGoz3lnEyaoFGoQ+RXgsfJJQFK9vxCybXLAqb3MEde74fJc4dHIN+xpq+mq\nyMux\r\n=GAC/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7e07wmSIpWZYb63eUp4zebFh5ge1ww+ZkR4CshetUkgIhANYwG4N/c7SxrJ6yjHzpxo2juPaKwBiXFFKM2ewFYvn3"}]},"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-top-app-bar_0.19.0-canary.a0793c96.0_1600794265952_0.304628301237597"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.06998a3e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/top-app-bar":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.4e5c350c2.0","@material/elevation":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GfzodL++gKzwMkOX9cp14Ki/QPx4eVlGuC+c/fom0MRXQSGRNXWBTigVKbknAVpqyGbZARbtnwHanBOi37U+Hw==","shasum":"f5e92f93b257f9c191ed61ddd8750dd268f4e075","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.06998a3e.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGhCRA9TVsSAnZWagAAm8EP/jxDPE8S472MuVB7HNHs\nJx6IDDOMO6TmHIJDPalham9XIKJewykN718mPPct5EizLjrwoat+HXYDWkhg\nm8kxmnEhD4y9tuE+wQof9agzDOsnBVvpWEZrpr9EU+NdVEPfFwF1g5EJxshR\neoaFggF5REZyUgNx4WQMVX5EUXiDU0biGWZ5ZKX06KmdvQfI1osZI3Genu6M\nCkISCmgVxzQH6kTq3RwBNzyRhOIzrBEyElz2wcVCgHSdau4E50+2DsRi965w\nDgU4ueCbOQEyjbSo1rrW5R1j9qw9lHKkTVaaJqV0M3zoYRgznqgPM2RGTI9A\nkP+KvPk+3SJrQo3a+oJU2MpYR/uRnkidEcWqhpcl6Rdi7BzxmmoD1qw+4QpN\n4CUXeSbvxijfQhBCVCG7xsY7i2fHcN1JgqGB6k3/gy5dPxNIATnd4vClEtri\nA+xCFyaREeW1IZZ9NWbVHIVq0PeTCfe/M+VGBBmBVY3pG2hD2A4GtUzNOzqs\nN+/c2nPK4yNhEmOcF2T9825TI3rtPVOiXi/LF0yDQ/8HUKGM+K6J/vUcbAjo\n6JMU0Dh6QkTXmomUD64B/6oFhfRnB1DxTOXaQxmGXessJvbbeMkED7KgFlFB\nX/cc0bzxn0akcD76lzzLaxoCGqG1ywdwek72b+T3557miVoLIhJk9PiDOXEJ\nxOWF\r\n=MzC4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMMlFmuStaPJgRhBplHhZuUVdsu+69ivuUHIANsa3RuAIhAIkqdIpzIoo6iulooENNa0Iq4TD4vb/SQbS8qcl2uRDx"}]},"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-top-app-bar_0.19.0-canary.06998a3e.0_1600799137218_0.29154258478894524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.3484a90d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/top-app-bar":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.16c563ef7.0","@material/elevation":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hLlnD0rrxNocJHwYk/OSH5XUhmhQEOphGLzETtOoXYOz33Y02itL9wRhALHC527oxe5H5ztPIsa7Mm1vy3a9HQ==","shasum":"a6bbb1f3f2c3446d2714f25d2f6b96053a243479","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.3484a90d.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTSCRA9TVsSAnZWagAAvqUQAIkg9OFjsByvlDGan1AY\nD+9fCglbElMStXtb92hdr7TTWZCChom7dhRsg8PRub/EAzO+B/VAvbLzpJ7O\n34rwRoN5L4Cv+eCWJfkNGldgBOmBejpzAncatx97YIA5+SvV3MRWDrqInSmt\nePe7tCgVC4MSD7sf/v4r5AHgSgp/rF0K9ysRle3VuVjsvqq0RcIU70yWz2wL\ntdNfgpTpPwBWNF2q0dk1RiNf0HkqqNjPLvvmW5ya0kLdralYO8FaAD9QC9EN\ntUGvAWyH+d4WK6G79Pscujs5GWCMXbWrXLQ33jpdfyIxkyPSHiEtmphC2vQe\npO7kgNroY+ixG0YNCFggCFSAO6EyzCgwDmmDta/1KnbwnoYyMHWnCS+srV/Q\nyn9TSSlyJ+s8ScmPUBk1jOYsN36rqneTgxOLXOXv1soU/oLNy787nDZaKnPz\nYhxHVuIdhpxxqasJrJPs+n+pnmTq0lobD7ey5wdhhPIMVZEnFdlkhRupFJ6v\nGkIJ5LFCf3E6I1K8hmziejTPTzZgwU13sfXCJXxnJQdgxj+gYcaooXFbXvBf\nhJJpdEeUz5U9nDe5AFpO11aiti9mym/Oa1aGmvDYjXhxmWxwFpCJ3trSVrTZ\nQgQru9/5oGMIzKgr7HHXsdxqGlAnmTyX6RSGGRUWUf8fkQGFLChs5fVu+hya\ne7Y5\r\n=WDxZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEAcfUjtuXLNRu0ajgJClTBNClFaw4TgbD6JCEEcrFR3AiEAwVTwUu3Y3Vsa3qb00+Z7jh09FVw/gcq69nkOG4KNszE="}]},"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-top-app-bar_0.19.0-canary.3484a90d.0_1600812242095_0.8038698766742582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.3f99af40.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/top-app-bar":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.16c563ef7.0","@material/elevation":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-uHB9oacLlBOMnXQhLhd+VLiz1PeItxo/d27cRUk5FbH1q7TarOGVt0sX9xFzH7mjkOX8V0W9ZouOEuLITEr8XQ==","shasum":"67e0d5ecf752a199e674ba09f48f7cebfb806c53","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.3f99af40.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSntCRA9TVsSAnZWagAAwIwP+wcY8G0Bd66Ms/XH6UJb\nCH1tuoVjB9yJjKYh0CGrYgas3/D7vh8AnSD9U41msZpilxTU0vrn7EKfiyRt\nGpVMmk1DNznpMbWaZhMn+UQ+5gDJxcTa1p9XG6sqHFUOvfd4o3ty4ADAfQAB\nBhSfCu0evVv24Ll0NpFqCT8KRLMe5TTJ5i1F3CicY0hztdQ5nmjRz0Oh8OWQ\nb5IeH51alHIWVWrUTcnBPq3OLSrkMOesHd4wjgclmdrArMTeKE9iXA1pJ5Pp\nD4zh/mu+8ww270YAyzJF8ivTS57s6hVIWjHCLbLWiCzh/UMuF23WT8inzrOS\nyjIdtRVAATVb3FicTig1MDEfmKyvZkv1meTFpKgigq8E7FA4KCosYMHhJnLd\ndfDlJ1HGDM38UlI+/o1bbj6FFvHQZtZqqmjwxA3Bii2hRunCCCMCCXMR4cWr\nQJOoAve8Zhf31YWQ4gm3kwPtTEbInAjDU2S7c94BChwLeGpflleq/Q+nXdXq\n+nWIPnjScBBuMq6Sq+YBe3RVPEnJ1Q3ujcWVrmkV6a9lFd4K7a2rsQeGjMmt\nSEs8pWAf9y1ggCAlcpNAFGro4rNQcAw6BvYd//eyaXDt06VXB09fWGk2840V\njfNaNHrNcpZkNb4G/S9eM0/4jlVuaDHSgGgndXKrXGKQ/Q5suc2x8yk0kzX0\nhcDm\r\n=pcYt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrC/pWKT2+xxbAjBSUrCXh6nsJZ9ard2UA+C3Iu2koQgIgFA8QuK0pkTlwJDlIhaU07dlcQ6B8q2EGai6RsSHJdmU="}]},"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-top-app-bar_0.19.0-canary.3f99af40.0_1600989677140_0.7318871235233524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.72aa1129.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/top-app-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-j34YNsWqLi27SNIugF8UyutYkjr4o4h11UoJo3knCvOANhc3i2dY26/76XOHhEL4wThBj90c1XV8hnk5CVQW0g==","shasum":"e9fcccf9f9797feb328cc625eefc4da8d6e5736e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.72aa1129.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblv+CRA9TVsSAnZWagAAvOAP/js3xM6CmHFCxsDzjFSx\nZ4ac1XMPVKb4j05D/AZ4scT5voBTKQzS8v8k4OrDQfd03Ou2Nzi6p6GHfoYP\nBf/XQcwAYCYt9JtDC75SOfbLeHfTweUk/1YcejIqBScWDvy+LGcJUx7vVmYY\nxic8vgaiRaBHkNbj95diTFfjCBaPRT4+/mmuZradArZImqGp6n+lthWX5dk8\n8U5+gF2wCOS6Sr35lcAlSXNotoTXDFatVmWYuVcnBGvlciTrvpG+tJbk5SSq\nGURDsl0SI+KKGd5v8Y4v33OEabBYGjO5W0KUbon9QM6F8aGIQ19TZ/6Kw5g0\nAVAaHTL9jv7PJiGPLTqXLpgIa8xMjzWWUhvNmyi+3BMQDFOFQkSIu+DcIwf5\nLzkykkLz0L0UwcCdAaApL9bMz7QsmWFdOz/pTCjjLAYChE8ktlO4m1Tmk+Eq\n288ks5j76s2tCuOL9jr2hMpv37FMVhBfSIrhPAQ4IDJFOpQoE/vle29bvJAe\nfqR+cS9wLe59jWq7FZughjqpnz6Ghy7wTPWFo/zEdTELPwtc6OXxmVteeRE+\n+8cf9Y7njz4pnenebzZM5AXfAcowhrrIv8tuKn+9oGkY8+OkrztsgqafPUQs\neEMQxDu+lgEsT1syR8rrUeKn4MmXTmzUgzm8YDRWSZSDbdbld1tUVx1DhH0U\ndOMd\r\n=ZSDO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoBcp56gT/7zIM3C/6QwOgSgZ8NrAphx9KqiyrSnSPpQIhAOjzvy8ZzUCQju+rGopxG9a/5pA+bJJXLL1q5DwvAbT6"}]},"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-top-app-bar_0.19.0-canary.72aa1129.0_1601068029632_0.5810701360072603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.394fd3f6.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/top-app-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-CMxd2I0XvqIHVA2iNj3JQI22yccXN5J1/OKKPtjut805ufABTNxRQu5tCGVg0Mbe11YiJrBRr3cYgrwRThcBJQ==","shasum":"78d1a9e92f482dcd9449dcaa0a606eeef715a2af","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.394fd3f6.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9FCRA9TVsSAnZWagAAbKgP/ikbCa4S77cpITnrOJNI\nzOOfnxc7Qgaoqsn3QpxAJg8RkAPgp07bMgfKQaE/GdG4NLR1obnDqS0zyDue\nG3Tp3dSIHOUA/RbIQAww20jU7w4xDnytW9mS8j8uSTEgcvHS77j4f0HFf5JW\nN9kjLfSCRuT1q0vjb54jmSBNCM9aqIX/HrCVD4FCfU22B1rS8oaeE7vwwnAp\nuHatm3vFN/drBdRgPrauqZhdcZdNpRiWG9A6tYfZxUsM+g2CdOhaoHfcAl36\nGENIJAMdNn9urGGCCJJba53L3/czV9d4Fx2zq0PjK9zsQ6tYkOsH8gD21Eyg\njfdwFRX0yVxpL8GwML/W2wLjf0hjXVAd1k/ZuqHUvyp5Zli3/mRDkE3Pnqa6\nB509QBx38xvjO0EfiPGbVfcg3bR6HWdV8XXpwAILhySSVXALrOp7VwMiJmwR\nyf0qg9s+OTltYG0PYqY8MKgvkoKgTQtKYeXChIUcsgYgyOQdY+3SboDeVuOD\nPaYO//+AHgVYOgqKQV+AEk2oSyP2evekWXH1DyQp+8n3IpOFA7UGbQL3o1ql\n+7F6EP+Kvu5Zgqs7zlzZVSFdByDZgBdUUtjKBFUqDzyVM1c0KZjg/q7LCVJA\neXJJ6zs/7QB8P/M8vfrCYtijNtTk62u5ga8HhEKUj6rrqHJttf4q5phfm0fl\noaFr\r\n=gAsm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA4f4iPQ4B44zt+/cm6Kvg1s3NEJySBXSPipbI4HAPUwIgIP+OQWZ+FA23/Mj3gjPOIkIcaCsrOS4/00B/GwFteVs="}]},"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-top-app-bar_0.19.0-canary.394fd3f6.0_1601302340780_0.28992136072720287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.347110f1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.347110f1.0","@material/top-app-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-koaQwgdi48fVPz3FbuGlowzyqO+pANPkjbn3c79ZSIwydyUsziav/EFjJC4Orp1LhgPJ8xakblzOq1k6PlCmAQ==","shasum":"e22e5215e1f78d2fc3d003bfd993173a6a7a9fe4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.347110f1.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRBCRA9TVsSAnZWagAAp8AP/397FVasnqTNRzb/ZNTr\nOAywYU7TjwNR+Mg2YuGHVT6Fga6BXRRs0zxBwd/NI9Ot3fzXEcAFGWsTrT4g\nGAwr5gPUeNEfdtnBA2z65XYEp7RMhLWeN1SQsUmMLDzSWbgoT6TZ3i9THiGB\nNRJ70H2riX2FnHOJZK7rMl32b73+qX1qXOLs3KanLOJn8vW6vrrXh+4YyhK1\nvDW2b/3w7d+RPEGY5nD3xqHQOX1SKR9lllgyrjLDEEAJIwyyVZA8OPaBi4ol\no7nFUN4cOMCb1Se6iLciGzrapa26iqfT8lR/Kj0af/FaamN2Tz0wVUTYJfzg\nHi7Zym8t6f6uaU+ivq04LrafTRdI7DQCIlGWR1ncrldmFavOY1ACT7jrTqxb\nv4n0HV0sdY1vGBXI2avMbfbuPPVp94OfffaME7bBv/vLQTUfXYwqy36M/zhk\n308K/lNGDjYNJ6Mpkjh3JUSzWl2CTIQYALZ6F2Tgjwd5kj58k+6Fb5hG2Euk\nwqo5x1LoBEFsDUzq7Qkp39qsvd+u478flg9G1jGC4hMiDYUwnrSUhe7ZGRBu\nbhveJibfhq0A0PmSTLlIZKSKYXlZxQPIzGG0U3ORqM6WOeyygcG/3C9KuCEQ\n5FpPaEz652osZiACqMx8LVNYx0762l9KY/napr13SVN1EDATBZ0OdfZqyl4Y\nJBoI\r\n=zcgd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzzyyhA8oUABRvFJtu8ORwQOoIPOrvFeAU6mRXy1aRFAiB7ZxvwbMJ5+hnsNqoJv09jyEhXlaieEUy3PHBlMGqXPA=="}]},"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-top-app-bar_0.19.0-canary.347110f1.0_1601311809508_0.30695050768065757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.5e330bb9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/top-app-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NQpdZR/XG/9byEqpgnh8o1EF8vT0E3wvOLZdyaZm6k+6FL9JnTkd+sqQJbzSuXUP8hzix6ypgg/nNb1M2Pm1+A==","shasum":"c2f98f23b7d7e7794d568d63d1eaa895dc511367","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.5e330bb9.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQAiCRA9TVsSAnZWagAAS+MQAJ22MkEXfs44mlE3lrH5\n9zCw6VKsy/Xwv4QOBb81GGgf3CDbq38+LVH+esTUl78z5yrmP/7MbxVV8CiM\nCKJd8nHU6P3+6QgHiNVTE6hPxtA3otjH1xATHlhc8a4Owpp6HtQgIt4Ho9su\nihM+D47gz6Eq8Aox/iW7ApRgZh7KiJ5Lxb+vFSQ8bg8PTDUfkNAWN9gubpZp\nNzkn1Fw3LovWZD/SE7DcrBAsWdCqTqE3DBS7ehMCx9nQpT5o8KOPF8KLsalj\nAb1kVkmtrQyfiheIlh5Qo0rpLu2UY4Pmz/1ZUgvZbs5MmDjEns7UoKXX6LBp\nZp4KrszlrmZt4xhFerOdT8O3HQthWEUTkfSP2ySO+pAcE632xFffnx9UZWaq\nP/x7IjQ9aZTyILhyZ0aUKfWwkzCsGmo3eX8BjbmsmGiSERaMSC/9pOpMDZKs\nXadYuSM+bMjs6fNljGC2/8B8U21E2u1rOyePHK6+ank8CcRYDj9z5Zo9B358\npQIPzBEXFJyTvxup87kxdmUN2wACaDTHcQiRmtqD7sCZQURZk5NnDxW4QSSw\nf2qEVaDdWEhyulYpv92bAAltFlm2oCrgEI63rD3rUVSK1YPoUhS8zjNp9dp2\n2Dn8fvkFjfHWmRok6J+r4xM/133meuyOm4Y7gNCOxw/yJnMM5E6jcmgEY/0r\nEIAN\r\n=A9qX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZ6bcy1OZm3HjhCMffUBZnMSSy0xmK3B9CgMfQl5s/GgIhAJb3MfPOI7bE6wlsivfBozaUedQ5ZHLx4utr9US4AnJk"}]},"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-top-app-bar_0.19.0-canary.5e330bb9.0_1601503265990_0.67978963790214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/top-app-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-chn8LD5VJCJNaIidOJZiHCwv41bK9aNZqTX/yhAsAgT/xrA431YOQVADQ8h//xcbt1pdV6K155H/7ofm0spWfQ==","shasum":"ea6c0c99e648d0938be06ebc931d9f7f9586bfd1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.30b9e3a9.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjMCRA9TVsSAnZWagAAwyIP/0/R20dxYYjX/hdO7DXQ\nNZ9FTeIKAtRZ+qT1TFIRNS/CX+fK5wMehovEJhKSONRHh9hKgxNmPbt13fWg\nLKuGjlv1uFYzQePa28RZ+N3md078FMsAr2GkaVeJPU0M9KCESZrQbZ/JvV9F\nRFOL+zlkoYlzjnUlTmzzu6cYtisqHa7uy6NRixKmxQwmRbaMt91CE3cgMYzv\n9mVCBSgZaNrEnXX9eOgmVF4AA1kL2oYmy2av2Ej9Bx7Yx7dxswk9zD0mjyeT\nQRVxGeNPlkqEZ8tSWOp76pZ647HoeuMR1Czh6VwqNP6ESt+aqC/ScYOa/qA6\nC3Wh1ZvszWDnUizcjZtfulYfU2CQvi8Emv34BC/ko28yLb8vJ154FE3IeGYv\nq70uuEsyHNnO0BoJLGWXz3Fk/coVwHrjdKU2qJVu6BKFoa87RUpKFnk06p8n\nHhurYon5K/uWl9HTf4RHurMCNGaBM2uUFptqFUzYbHgJNE/6JGRgf2Rzbyv5\nLPNUR7/qKKSuZ04jxWfktZDfwbvk+Lvpdg4v7Sxa1GY1fNyTvPzmrUAIOjlG\nF+F8G8Z3b3txuHADtCyfRPUvNErlyc2B7Txl/L5QDT9jP1tJKYl3Iv4916pT\nfqP2T+PJnPpjqOmnSjRiTcOdVUC0lHel6P8xNrDP3W7+xTbkRxQG4fU0EJvp\ntA5h\r\n=x2ci\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyFc9c2gDGRw2bjFnEx/4kya0FgVkFmNx/d47yW/qU6AIhAJhkJPCkT38NMfaPD2f1zXYYYcgccEVbvCPeWK1psQTP"}]},"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-top-app-bar_0.19.0-canary.30b9e3a9.0_1601505483903_0.6507070628629215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/top-app-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JQ+TOZTw3xrg4gchbUhRsQG7IDKtAf+bUJmWSVMzfoVazEvrKjlvJWlXMUoTj2gIHASQjDFQpU9W0CumMqhkpg==","shasum":"3e07d284d2694daeecd4181e1cb41542279758d4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.7bb04b9a.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTCCRA9TVsSAnZWagAAl+0P/RuPJInZ5jYh0wwp4tBO\nLOpfs4eHHveF7+taY/YK/p2X0+v9ZqQ6LBHzjySpmLZBBEVkCrNHgRp+gGVi\nUgTBcnII53hFLeQZ1knDJBWET3T1CJ9zREGah9lxm2X1cgBxMKzd7cFxXzOB\nnCE3bnMqQHnwg4Lq6loEJQRgpnjKRgtcUMUxGTGWvxXvKdAS3cAketeLDFHn\niqmH/GsLgL6Wku1HiWhb4bIx7wNMs/s2o24/h0bbzOBXm8jYwZkBQQqPcjGw\nxclg/5czOIWE35fJmxhaMx27FGy+JcN62LcQJfoCwYiGqUM64wJWqW6sem3w\nC48Z4xFap1IHcmsU0x/DqIjqYL5igCNDYB03Vpv6MX7mwZNJXdqUdzc+MWV3\ncPkDJ2u3JHSfg7WS8KTU1UN7m26i8qZtBrtB5ngR8WMLmkmrbsTkg1US+C05\nDtYggIGELiBao0zQRWwoQintx2uBR1qsri15c8+ijYRmNb2K88pWAdOtu0rN\nCjZdghbwHmxRojR4Gh/B8pkDWhGtwe0WMCijUkxqeEY6lTbrGwwwaYLXPBmV\nCgPlQwxlIYLyc0c0yEe+ITMuOoQflTDgb8K50to/Znf1Kw5+sf5H/9gJYsug\ndvzs4fz5VMn/yS86YOtnlPVh76SgyXwKNwHofl/MM6VM33Dh0j2zHpuyrGt9\nUTp4\r\n=1UAk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSp77w2BmBtcBKsoyhTPmcq/5olmdzQxgjrxMYRAnAYAiEAgT3Bh86VXB4IrkI/axdP4DpQEGAWVOA9EBqt00bACBA="}]},"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-top-app-bar_0.19.0-canary.7bb04b9a.0_1601594562126_0.224305450859982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.615d861d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.615d861d.0","@material/top-app-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-UwTzJt++sctWyb1D875WhbP61cNfv499HnLj+dUJURAIA+g60y1X+nDmAekqgAqU9HBW3ryGtPUfncRKgIUrQw==","shasum":"fb06fb65ce9b3f46f04b87c1c6a60aebad8c6723","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.615d861d.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNfCRA9TVsSAnZWagAA6MgP/j3jtEQ4trQ9BreFf6SU\nkYxDzQFcOuJ3vaiAXbYrZZLVYnvEHvLHPLENTRqTNrPd4DtPsRcK7GeINY6g\n4/FsfJ3Ld3WZuv/fYN4e3k/ENpt9aXWAILzXQeI5lYVDSawdzVJ3AQag3jrd\nCrZD02n3s11A6H1+zK1RzpgWYbSA90LgDhr4wvsDn5Db7B5WDPw90AAL8+CQ\njNMt4rTq+wMYFIjhoeHzImdLBneEtw7LEbzlbGW7nSKPccpHUFFsaOvyuQiM\n28FroXd7AonP7d8FUowpJmEsIQ+UUD1AbSyq+2jxJFRWH1Pl+PwoQlAZ15Lo\nHkOrs+wAP1s8xansiIT0N5vGEsrU4ZvdgqZ3VWxXeMaaTCQiOb2HwG9U2C1M\n8dsckWXqK+utn3jH2s5Pi3PTtm25+4NeEGwhFlk3d5pOylKsEZBe2lv0nJug\nLGU6cc9T9gr/oAnbeBInrEuvB58VoPx/lvQcKOLeLIf8FLKKIFioiYSkNo3q\nC+F6rLDoaifpj6DQs3nWQBT3xHXnQg8JSGEy4pctCbqFEY7dqeYAGltXphQg\nf31oWfVFGWrFG4APCIshln7cTRdG7Drr0GRZenB+BDpcYvDCB0HXUdoGs+zJ\nenChrfTK9TdRkjh0ih+NI2+ogpbCfPLDeu2DFJ56mmMybuCwvDdz1QTPpfw1\nI+QP\r\n=4jOB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+CQ+09nsEAKC9UnvbzJEV76XVfdzbNrHhVPmXlBtgqgIgLnq5EI+7HSZofzf8AAGDGjdXwyiLaOT+hUG/tWkeybk="}]},"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-top-app-bar_0.19.0-canary.615d861d.0_1601602398780_0.03444144439132324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.af110e86.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.af110e86.0","@material/top-app-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-MZocMWP3XZ2FM0ySc5YMPCXkI2p9XA3Vx82RGVXrsxRyNxNvrLKDZf/dgOryXXXnjRttiM+PTarVAoVJVCDRhA==","shasum":"c0059c4d1d910ed3b3ce31d839e33669d1af3d32","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.af110e86.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7ydCRA9TVsSAnZWagAAZqoP/ikd0jB9+CS5smiuf+ZL\nQBlNZM4rQRXrRnhlWtq0B1IxAjFiIjDCdRNCSiuxBtwbfeuQQJra1KGh4rM3\nEvPSMdMh5Q43WRuHk39GjoFZENMGouEj0Pwyew26/uUxFwMvR3Kq/tFiKIct\nqmGqO+Lh7hOJc4UBAf4oEZnAcmbLcMFgAT5pX7h7iwCYk/QGTolRkOXK+zto\nbwh53DHtKrLtBz8tS4QA0lrMBhJfj6XnhPdGRiCHIMYLqAu8P5N0I6d7X6t0\nJiV/3gg0nGHt2d3OLacBKl6kvTlD9TKjIOU79FUAmViw6Qcdx2VPANIWkwVS\nvpUvJE2Yl7WtPgf3tYqoLgOLLeFoqnaxs2HcqyNl+2WsbW7/l1zTQKzvK7EK\n9Xe8w31uTF8H9C3uDTs/9cxRXI0e5Xd5F89S2VwMxt/XiUowkcVI+Kj6+JPu\nDdbPYYV5Qctzxzh8fIkPpSrIs0KQGIFVsDrWQJ11JmbsLLtKab956izpwENs\nP3+6XR1c+SQgMV0e1jPRQzvrd5+noHYRBJwM+O1d5Eda8KW7NS4d2w9dB/8T\nlDXD9AW3Sq8z9+Ij1yTGhO556yvtbZfXAbleAaipQ4wpd/C7sHNHNIo6sPp6\n/FIKB3dW/cTo44/DPXSCihw3WtfUhl+iQG9LbMyHqj9XWgIYdhFs0ooR1RpR\nBPGI\r\n=WOoQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+EKc7lWVDrnkSiMXWp7kRnt/ERNeJjT9lweIe8X7lzAiAbA+S2oBgJPnlZjDrzsliwzoezkikrJzQVwZsGxW1zzQ=="}]},"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-top-app-bar_0.19.0-canary.af110e86.0_1601682589062_0.9347748861285665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.89d27ca5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-mAqFhmAJrz0HPdqxVXlWu4HHK/7LApVxdS1/wT5BvFnepwBNlZ/NzBH6/aufq2hS/AROrT7HSUJAItZzZXNA1w==","shasum":"2470543781653c0f25812504ec68793131409a6d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.89d27ca5.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fkCRA9TVsSAnZWagAARyQP/3u9q8PyNGGejL3iN33U\nBVeQgNAvn859G7MZI9jGS3vvu5aBmtrFgHdgZXSYxP1ApiVgahMt9WHSMBb5\nW/AFtrZ4xuoLxVZ1vXVgeVO1GWsBN+bXUqF8G0YnwzJ8Z1xxg7XeXaaHgjZP\noTuPmH1JQF3M5lGY7TgTp0mryoqN1l3vgyloVcWcjLW85prvAoj3DNLgtspy\nzC9xhVAtUHDpTSYj5V+edbyYxezmRxK98lmDBLjuRwJqwEq1kOFsBJFgmC4u\nJPdWPewf6Xk0jaOGcavFAE19UKg0f9xK3iqrG+VCTg9KMnSj0/EaRqRonSiB\nHzMSqYMTf6NLl3vfhp7sqGqtp6y0PjMrN3CtnfJBdCnnhRFlrEb5ivm/utKt\nZk0fiNAYe5yRb0s/oTx3nvFVX/96avcOdvK8IKAxAgxO9ZiJQyKSACiFexVn\nUvn193gnT42H5N0jdYYqzI2zxPhVLWCwaKSJBtcPd6r9fcueEuAg47ichqVi\ngMckMXZ/TJiU4SGtapjl4jguNtGFh9Gx+F00h3Izb2q30yzG2plkBiZ7dmVV\nm5qDzliB8l4Z/4/SARQ/okmA6VGrvM4xe9FMH0rqTPDFCIyBMMOi3w0cMHAx\nuDcDoaJ1vCry7xg6Xe+ZaqCZoRDcbycAwtxXCz19RDWLWFRFj2jPVc6urWUc\ncDex\r\n=v7Uj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDlvCdUEoOD8Pvo4USODpziiFirQp1HSYHaAn/RGZXxAiEA2H7LMfwpP8s49OQFYQRAlELhofWB2qp2nkvdvMJYXg0="}]},"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-top-app-bar_0.19.0-canary.89d27ca5.0_1601947620193_0.5184296698304778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HE1ibuVpHPlHX0Gg5cc6eiof1ruD8sTtHdqeZvis0LPeKa/IUAjeJhf+sR86+7uZf0/5RVg92PKQE4DBS9DCFg==","shasum":"c6a62a46c60579ace5fd3f809d20f8a56f988a46","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhYCRA9TVsSAnZWagAAooQQAJFnI+LbeIU17ZQxd/zC\nQEnsEi8II+B+Xo26iTPrTl6f6lhApvxZJgfvZD8+gFk4VSsGf+Z+kDUGu1+f\nl0swKIAZFe1hloAs944yC00i20a3CsdO0DcxjBSepX6LUiiOEIe91rDdNgQv\nmKLw9myFEch+y8ocjPNWNk5SKEJFPTX6gIHC8wxG4Jq14vFDEGl1QaMiuXCb\new7SpaRHkkyzEIM2JifJmToycWtjMY5jazyl4qXtn2SgQ2oG+NPKebrEgRBO\nUGU13Ng9sdqFCUGFq/I1oo4vFIdKkH6C/fM73ic8fCc8tBftbFsgvBNHMkZ6\nP5kzuH3LnXudwnuOOuStUVtlT7JeFPBuWu0nP/VvtX0ksg1A4rn8P/xUXCL6\nmQ2b6W3pQMGJQwST8q4Ij1xFSktDBhkOFD816uGGLacP33G1SKwHmtoqql6m\n7qbcsKLL3v+PElI59S886jbZL9qmtx8ZfXKohHDTV85/OfpdtJnDHcrzfQ6D\nMtoGVD4Uy5bAz+jPV1HLGgoz/HRrQu+rd1uvg7+Cfic4Gcn/uHohK3RUlCiw\nI2xo+hflyVlFSsXo0XuoHnIobaYzZNjPA1w/FfC/AQ3kNPGEfvloIbBWyOH3\nfWIBjYqZkyauRj7sZPhM46ETeaKJBCTt22dqTEO9zq88mZMeif6wAMoiZWjF\n0YQq\r\n=Yfyj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICX02zTW/rTg9JfgtfSVwyJkQp8PilWV6k+GC4d27F41AiB1v+4ijyEm0fvIppR2ETgprl5Jyd9/O+e4HDJeBDcloA=="}]},"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-top-app-bar_0.19.0-canary.9ef2e7c2.0_1602029656391_0.9458861031906713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-jaVHJ9V2z1nKVkjngD09QCbO8XW8bbyw3KviH+AWC2sDukjk69oQyv4lSE5wNlzmh9vrWlNedoyJvHBo6o5Iig==","shasum":"6e8130ee1fc6c8167d0564811b87d1f1058be1c0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0-canary.96c8bdc1.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAKCRA9TVsSAnZWagAA+qYP/RMveYV8bV6EXmobNjmm\n/GVERVe2+mdtxFK5TxxWJkJUZHRl/4VHiNg+w8/O0t6eZrmx8OOAY5V8ZW7I\nfHGvhWEzgfFe6drEJNrKVlAQ6DReKQngENBHZ0vW+Ac6ju9klhWmzjxdomPm\nMYx4R6PqknKZf5GZW3SeYsb7PFQ1XhQ9ova72BTcJnzKQJueXXJsf+cymUKl\nKdana/50HdFUHGOe+lZAeyYdGZwRyBXXS5uuoyWuuGqAk5MTg7me0z7bfpp2\ngm+5BlJ91N/f2LOP3fAq3myWmX5k33CqufHw2N3WYRIZJVBbSydbu4QJ+68x\nxXghvEExIPGI47a22I4LO8TUpliISTTgiO1JbpRkk3qW5bjguWl7G73w6+xk\nrrCx2w3eoP6OkCJiAO3GrEFxdNaYCH5Nq64gG/d3/U2ib87ASiB14xMf6QX1\nrwN+9HoPtdDW7kz549iJV2ZwfopgCEZY/6JxI80YgG3KlHUlkCYBZl9XVYVi\ngllTDMdqx3Re8+AldfTcNvV0QVsDVEFaOTqheZE0S+EwlGqrMM5nJyYUXWJN\nYTaK9/+3BToGsckJBgHt8EhLHiMEx0lIBOgIFfVoewd5pwHw5h9fEF5jnfCB\n30osmdETVsimZgLAr81C5mkF7Dz5W52mKvwns/EEvpVh6ko6DUD32iKW6QHE\nA8MF\r\n=2HHy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCguCqt+Zz31WxCyIlFS8BQkfxuPxjwIcn51sntBwiVOAIhAO79hoC7WRrCObT5MsVb8qr3mPEFcW1meghbGuuXFtXb"}]},"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-top-app-bar_0.19.0-canary.96c8bdc1.0_1602101257730_0.5405332396372233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.6c21f034.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ukT0fHMBcZB9nji0pD4SHYmsc5mSYNdtn+9y35pUZBABUraJHnnZoUQEyanyjSd6NVadwGfyS51x45xoRM53bQ==","shasum":"d486ecba1dc8522e9740ec6b95c72493c399088e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.6c21f034.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGCCRA9TVsSAnZWagAASQ0P/1gqzjxupKfe8RT6m1n7\nc2FJDhmYQnjPyMTu7wTCJKIJWlN/npSsK7MDjCdERQQwXaplaZae2fPCeqUv\ng8v5CEzPDmpGu5JCwC5gAFsDmcz0nfR2QkASYypFHqUul+ikfs35/MLjwel/\nNJkl12gCAXJUMsZ3XZXLPWCKsdUzkPXbNAE26qV094VDOaSnoUWZ5fIAG3NS\nck4uuFzpwxe0/JnSAQSJBxCRGvzhFYY+odfJkT7/FvrCO9rEO9IKJz4oSvn4\n8BI7EwYJE1IQVRjIlZF1eKEeY5d/BZGLRHpCdmmTA5tO3g0GmXax/yk5Bb56\nRxGeSUklG4L/lZ+XZzzHdV0UZXqAhxDv4F1PKrspPqUExoOMBFXKpTR85a/s\n885re7hbuOwLJMTtR6SgBnfGyB5Xg1baFdFBbKuK6lGSOfAb8eLoyv2AMhrP\nW7L9uFYF09f8zhHEuhvN3Y3xOJQLxguXELygoQFnL9lvkDBXEcERPC+kJDtS\nTr65HiRP4bPXNeMgoUxhYBGadqNaNhbqBYnnbFyEEZGWtVjGFK+ceuFW6swI\nT16Sf1qta7ZfeJEkR7Jle7a7eoZN4Wu4w7+FHUfyJWzomyBFPe5z155jdo4K\nx8Da6ERO0zLjZ4W6Z+iucvgNPD86bDd6RjvWfUoTc/LtlkqZ1PTIugUS/a3b\n4E2D\r\n=45SD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAc3YqifBdBbBLlhWJGTrhYlz7QEcMgN/kmyRUo8sV7QIgXaDX+G3NTYvSUqJ90ajWJqYhFOn1NHNasf4mHmBwRXw="}]},"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-top-app-bar_0.20.0-canary.6c21f034.0_1602109826403_0.49436746137750087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-top-app-bar","version":"0.19.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-bwpdneXYzP+h/q1cdBVBeU1YInwwukBlPwSnKlu+uNF/RNhA/4VByHSJ9FHISn061vdL85/MfKEW0vuj4aQqKA==","shasum":"fb5c095510ba2826e5211dc9899769b15826437b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.0.tgz","fileCount":16,"unpackedSize":65364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIwCRA9TVsSAnZWagAA+QEP/1LqG3sa9st6qEuGO5gO\n6WjCZrA3GRNKXgvOf09bkQv8O5+0XSmwiNbQmWva0wKwoGY7B1BmR1Vy/HI1\nz5H7WlVbF5Cuf3wgzCk7zcVVNXaaTmQCNjJrkH+9vZILuUwwktbV3tHrEUwL\nA8FubmsKxuidusR+tBiZhIKUQJlqlE/MwJJmTl2+OSQAu9rase7GE9zFYdUR\nvin1KCpMTc6QExWnB4h+1DAzz0GRm6mYcPq4p66+Nb+idA7Hm5Yr2KD7bQtV\nnk9smEPh2cwEEi6y2oLDXBvw9tr98AdWMUBsEj5EuZT5cxSrQN3XU9bsA3s8\nW41w2lRpF9ErxOlhWhHzxmnK+B0fG0iscAxlBxU/HqplVQCWGCTaHcx5+Umc\nvbjn4uLfWYjCZ9At+bl7GoNgM4aPgiy9qByEwtDuTkJqsmGwXtBrIytgeT2s\nBQFaXu9EK8swLE3at1vsfy1HJ+tFz/XbmifkfgfG6H/VYRx0iA0NyF26Xm6U\nc3J4ecJZRmohigdINkL0f13WoJNy+P2CRQkVdZoG4WkNeJKmG1chsEMBezfD\ni1nMxWF3JDqkp9JK0IQkVwA/oUBwf18O8vM2amEgS8iTQtXpshzvceEsjQvU\nwbi1qpZL2LO9WIm6JbkjeoW/14ObSvu9ClUyyoCPklw1riQZrEpoJCD6TYWz\nqM0k\r\n=NE5f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCs52zW5D9eumnTM3ayXE1yW9ieuLMqkmbH0Kwndw/aAiA3R1YuD79tf0rJVINQ/OkFktAGM0hMiEM/nIW4oMvz6w=="}]},"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-top-app-bar_0.19.0_1602110000455_0.7005855704538906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.1f026aaa.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-IfkVMBfIncGao6SlQ/LrNMy4b9pqE/iHZUUHwb6GETb64GIBSY9TU2O5m6764CqAPTMP0j9DOD2RGLze8U7kuQ==","shasum":"f9ad94b54f363526305fe5ecb6657ac6c39bd430","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.1f026aaa.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5hwCRA9TVsSAnZWagAAPyEP/iP9PtZ4XVx+NJs7CUVc\n+4ml2uSUATe72BBqBqnXUW8E+UTxZSiZbVxlFrK7XQQ4k3+t6zP4s8/+Amd2\nX3uS4hHfx7149FkIPJ+I9q4QYxWJZoGm8pwHVP0qEqUY9bXWL1c7o4z5ncN8\nhMyyklpOHGuTgVL/NIBxRDoewihyra7eTQApxF97c18jyBl4w0KGfTWtan3A\ndiArR/O8d3Sft+Al+FESQVutBbSgFFhoFZIY+KIRDi9sSHppAkm4YYMpcdBq\nSj9wjuSj01J8K3+73UEzhZO/J6UoAoKZQSjwg5ysxbJrDwLyvfaw9cgy+dry\n6SsWZpTz2EXMsXx/Orfp5YDBrSEohtfFpcDri9mzG5MbtzkR+eHKhFDvKqnT\ncO167XOUhirIWP5yXRGiP0q96P3YfNyJu9yiY947PN63ChLwIHLdxBGPDLuD\nrTguXOqrrnpOOBzDeDoHXO0ba1YWV80jpmjNv+68fKuXKhDqGzWO59JHRzjq\n+UqgcVPxh4+QIZ6xWkcGimeOgQPkbHUmuAjGCMuAAu0OB/jhauKJ9wNzRF1f\n8Xc5Z8YCEg1sWLTcX6BsxjWen2eVds3CoO5YFsXWBma9Jaa3nos9fevUsXWP\n5E8Tr4TLr7ZHo9tB4geeAs3KTxPw35lQiC0klcF/wQci+QWozyUJsMsRKhwq\nFE9b\r\n=XgKb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjeaWtKHnUldinf3+5tka5e03SENJmRy9AfpWNEW+TAAiAHj/Eeo5i2NA5Alrbt6pwywCGdrxvrwOqAZreUwTCS6g=="}]},"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-top-app-bar_0.20.0-canary.1f026aaa.0_1602197616093_0.3364481282167855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-top-app-bar","version":"0.19.1","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.1","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-AsMr/p5X1ambch6DnSpPIYF0ZnGAscJhyWeVawZ0zF1amzypODjtohHI6qsFwjQbcZ1Vm79DyH627DtsPEz1yA==","shasum":"ba21809ddd62fd79e47c84639cd1ec029d28a53d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.19.1.tgz","fileCount":16,"unpackedSize":65364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tPCRA9TVsSAnZWagAAqrQQAKQkCjvA5Mb//kleYX8R\neD/Hh/bYNRqvrwNEFFNfzx8+rZMz/H3EHxJHwa1FfPoUTYzZRNjQCB2fhTQL\ngdbDh1wJZQwYKhHMvklUNaq5zmzPaQt/MiZcJ9zwGvYbStTrFl7R9ZJFU+31\nt9U41fqiLRqH3D3Oask/EwPN73/VdslUpG5PGUX+3XbEYaOMdgMt7gMg6k67\n6GPNtxNIFWYv8RSOIO1cHBZNoZbjMqdOCcU2dtAwRzI3CIJ/S8HKsSQFBi6s\nElzhi4aROFNU2x34jKhGmGNPFJjq4t1xDKvj+DQEHihVmSQAbzjyWo4FrmTs\nKyzIjMVXJg74Gd3rsYTB37KRFRx8x5m2xjBM/tRbfCgpuVWFI5K0FcJ+XELD\nG0t/w/cV1XxkQ/zr50ZO4WXQISAAO8ExAB/IarjmTMgP5MOiEeWN6mkvKhVM\nvylhOSyrHlkqzT47WqTBMjqdZ5Yb8BcEZYjnAie8JOO5twaSELEdIA+5ot09\n8eHE5xE01admLd1l/eRyJ4Lg56pJwaAjb40GuzhJiJ57P8bLPrI6k0zfSKX+\n+LKwtKRqXmrsuWcUAfKrqEkHZhpDFwRWgMZOoXXs+EI3slDbp/AyBqKwZ5yn\nNfXVhyumqk096LmOZPQFbxbjkbrrGUl4+BFyLP14Tunrn2nj8JHyfZXcmWRc\nggkH\r\n=U/Gb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAgmQUjY/ItKuC8vbW5RVeQsrdvpWbiLgdfM7siSi69iAiEAg7KuYWQtmGyEDkiwD45EHrKun+BZbf2sajhEBm59gp0="}]},"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-top-app-bar_0.19.1_1602198350864_0.6558862038694284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.5f6894b1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-2cqLAb+7NohW9bs2yTf8LvJPKNsq97UzoaWFRcgRrPFQ62w4xttCkon+nw9UZfJ3u64wKyRQ6C4Du4GqeLi3/w==","shasum":"b83b7793842422b860914d0b355cace8287ba2af","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.5f6894b1.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5uQCRA9TVsSAnZWagAAMEEP/i3t73pMYE2jmkSt8V/Q\nSL+2eQXbI9Dy1Yh7c9u7XxFgN9mQ69wVh5iOQmy9IQf5OuERc9EzEnJnDlIn\nYt1fG9ZRrXEVKoSkH1b7+ZcaMrj8u4ntTWnQkY/J41D4rGdTuP+GjWixEW/I\nEM1oxXoZRmbVqDY9hDqbFUc/nHPBozpPNa2qztfXYdEcmWPYC3oS0TKADPzq\nChgbVK9JWLqOpN/8aU4V2vypZ6mKCnRrDLd8vmLujVMRh/CV6+QyksFtStBS\ngkU1R2/4xOAVNSGwscHoGdyEFsKe7HWIXSv2WrfTyrtCWp7oXFphTC5v1OP6\nYMKR+aQfwzZ1j0EXmjAayGAVa3wuSR3/XNZisHO0G6xrReiG9XDmqidtNOSd\n1eTErSIMF3AMLYGLJnP7ehmo3ZFTck0F6ndebpkdNw6rxCe/x5AJqvSY8hXM\nOx6Bdqb21CN0TbnUvcEY6F+Qb+wHHcJW4nVBrMrZHgZZ8kiOwLMg7sGIGiEA\nagxzkkFeGFVPpR1q9UibR+TOIBxNRAhiEAP6Y6rqNeXO7omUAnMs3LE2cOG+\nOCJs8cEvcpRHBMx/1szyuapPR9sLRxVfY6j/qyRdOPB58Ib1sS5hK784bXi+\nO8sN4NZNz+ylKt5OiSrUHo9HEZ3DMtq6Vo1FAwdGNX645E4fPzioNrc1SeOO\nZOp9\r\n=LRrZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA8UFMJu7qsUQL2TyQA5bIHAUNMf2pl5l9EavL6gjjfAAiBqsrti0PkkbDmBkm8EJ1z56HR110QKvJjfn0eyu+vU7g=="}]},"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-top-app-bar_0.20.0-canary.5f6894b1.0_1602198415692_0.6560154966301734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.f6260d06.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/top-app-bar":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.8a39352c8.0","@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-br+HasIOGZ5frgZaUSkn8EqQW8I/EyGSu50efRcQMDVRURLbzdvRykHVOBheIFpqJqLVnNejW1HhuRLV/47hjw==","shasum":"0546838815d78400bb9ca20a41ce9825eadac79c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.f6260d06.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnkCRA9TVsSAnZWagAAtxkP/jGQrX6GncRobS4f0SgO\nWuBH4CXvSugyxWcbLMzQ6IBZsykCnNvh9Iid7mLfDtSXIJKzDZfECfsdSMWC\nq36rf9jFLEv8lekcldFEGSQlBeBdllRK/Dt+7tTcif52LmCuB2vBBsfiyzAY\nIJtxbRnziF5a1n5x44/kvpKxKJefxyJHr6gPrrZTMvCqudWu+W95SkJfyMXH\nubmbS8VdzkYAc3SXu2NQ85Tum9Y30rAiojXc+6Jg8QY/Pziun+XhId1ZInRS\nnQ2d47BP9G8hQ4a7ZqrksjtkaqKckWBRxbPa/FbD2UhaN21bpCY/nAAaeysz\npCRqQIqXFzYHvkUIa3IvuKoPkgWSfgRicpDt1m68z48Ch+vN7ZN+IkYhrS01\nb9NXSiq0QKxOjIEI8Iwx+AYn0DxPt3lJi2bdmhx/Vw7QIUznoG7mUKvjSHCb\nlW+PUeRW3QCjNS4tKg5Ws9S9hjphdH/hfeu29YVJIWthzlDF/MB65ixyh4j7\nLnXzMWygzqMCd9J2wwnx6EvPB2/A4mr8RXP/zssi96jAt9DsSHQWHQRqphC/\nQdB+u8A6b0Y25GWBE1bRPlwYAK1KBRE++a32AcxiNQRippcoUyOrOxptdFIn\n+6rNv7uWMCh39Wqk61zF60miU3+oaNRU3SAOFRhRQ41PEEfw4oYkx2uBq1bp\nLzvD\r\n=boOC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGmW65W3GcPYc0prXT/iwPBjVcJdy1DjrNyAn76J8orAiEAumRG3t4dLngZOpjpEMuZsH71keRCu3rRZkA/GHOCUbY="}]},"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-top-app-bar_0.20.0-canary.f6260d06.0_1602542052491_0.4124506568364483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/top-app-bar":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.8a39352c8.0","@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nW35I+FfWs+h0uoX/T9DMZ9VlwRZX8MwrhXgaBndUaxg6NzCVltrREqwfSxEEc8dLLfu0SazAtXZIFY0/XJfJQ==","shasum":"740b1c240ba7bd5d888fc0c734d92bcee7d1b44c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.2d1b08aa.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5dCRA9TVsSAnZWagAAMlcP/0aLP8Dj5q67FCo83l4I\n1pzSA1k61oazC/AQE2MYsQDUoRLx7vUgRRjgt+2qB3/jGjbxgMKmLDtxrd4Q\nUgbKM2AozjUMzlh2MnwzagKWxMH4Djrk+GXqOYDjqAwy8q4DG67xuKHz3uCq\nlRZaOf3/pBt9Wx164j19sUgnzBEk3DJRCkoZHhpbRVB8Z8TJEDAju89ttU8M\nmEZ3VDOSSJlVCUEEjr3SHY2JNZ95NM44QvU8bwBv5MJnSVwktrzEc+06+nDr\nhNScGiMiZ5DV9ViPhKennZs0VHuwi5BpR52y5TX9ytmX7WTB5hZ80E2+WZ1m\neNHUO3UY0DMJNYo6uR3MCrbaOap/IrDXXZSsMiIy4+G7iXji0biA2wCCK3IH\nrStwHXcxMCHHzMAwObbH+hoAYp9ZYd81FnnkZbk3bMsYBXJtRDdw2fG6houP\nUIlVt8btOOtNjj27GU2qVFN055JHSAmJLHOWwGunjFeuwUm6gSJa6NPEnZDb\nOUObyxJS6EInHjFq36+WgQ6L/cKBoBppLjViDMYj6RVzBPfULucRlkwBaYXl\ngvudB2o4hI8fVH1ZGiPmsy/aDB4OE3wLJorfWVfbgmFKWk/aak8wMy6PbIt/\nXcgBvl9SKHlqb/UhdnRbKyJo0c6FJUqJYFUZkXihX3IcbH4u7GLQFkHV+t8Z\n8VrT\r\n=jR+6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACkRLAM5AeVuImdv0Cc75h9VH4RL6wER2sDXWlTwbjHAiBnRjIEsIN8ytHukuoVRf1m12xJ3tjSTtDcdKmQbrqjQA=="}]},"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-top-app-bar_0.20.0-canary.2d1b08aa.0_1602616925119_0.4835974344031717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.5bd58844.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/top-app-bar":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.790ca85fd.0","@material/elevation":"=8.0.0-canary.790ca85fd.0","@material/theme":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-L0yO6JwS6vnauqlNYghbpVE4GIz3VCYNxPVuONpl6CDa9QQdjKZ6RlhuV0XZFjapswlsDIlbw7VQ1gUGtlJsWw==","shasum":"2d78e064bd342eeccb197766fd7604d46b695dad","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.5bd58844.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxFCRA9TVsSAnZWagAAMXMQAJoIP5NSRRM0QxshMcHW\nHPTN4dTzV5mA1pZ14LTi3e7L3kZ7PKeKi0AVVjIz6hvD3cU58fofxfpIRTJ/\ncViMX3KbGJbh5YAy2KYOaM0eRJn3jSryYEr7hrdGq0AxjT6obCjyQZbdxoFd\nzM6aY/8U2nY5cWD/OvhqsqJvdxz6HBmVWIl9TYNEkhsJMMgqcAqswq/S3pKF\nhdWMWKn76jwHXlTRtIkzrizVP/SxqEbJvPwFC1jo3Ga6I3mb71t6n3Iddn3R\nCkCjU5qdQZ2BJPf+yxEJOWChKcxdv+6Szwyre4Ocj59Z02LOKmHX2NWi7iIy\nSsbKjYK+yMyAZ355J1EWxc7XuzXANccIMJPhZRio2g8rKZ9MS7udTOZrhyrL\nfgojKZMPImFtkTtVKHmvCZzZ8jEi6NJ28Z96SRpKusAHsKSWv9rPiF0qTcL5\nolZTu9dVcb3e7qbsaUPCySJgswsu5C/pKQ8w8XnRMJJY1Z/jfKaZz/IiEKWF\nPGybxZuSG34vWBtsiGFQ1xOaFEqeEAKQ1HC/FKhFiS/jEpbz6KZKsBRBpWGC\n/AcupUNKDIDB+BHz+u7zNveB5O8gQCavDcqVr842svOg2aOTq44hZHtNVZuO\nq5P+JzJv0fMhyg10ot/Nj5VMU4JzrygjWy0XXfCfPS39JbrFWxdIKq1Ft6oP\npx9W\r\n=pIw2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI2E4jwgU3BMMeP/KTVdJ82bbfThlwDuiXkqUUfKoJOAIhAKrlnpc+Ix1EUt9hMYj4vbouRmlYvo6SFSXuiP9bc7Vu"}]},"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-top-app-bar_0.20.0-canary.5bd58844.0_1602632773114_0.3710297709511785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.bc846b29.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/top-app-bar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.c71ebfa02.0","@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-mVW6eEqL1guVePtbaAT120RYmCPzD/Pyb+u+2GW8GKAojteqZcjMl6mrThpFLPox5K5kezp24ZmF1c2mqvmVZg==","shasum":"3b4d4746e4fe9e836c1aaf99c42e1b55eb7e5460","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.bc846b29.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BQCRA9TVsSAnZWagAA+MEQAI1GPcPs0ygeHouiKrFs\n1l1gfBUieKf9fqRyht4bREt7sCiVK8bAhy2pxhvXqzctrRYJOugbgViDWUQh\nO569TlK4xvT9D3MJWyvUyh6LftzMcWvcXZOiUKgIsRyQnc51vz2TncReJA1O\nrdQdbVJHhiMKgDA4cesnMMO4UqU1KuGdCe6NxgQ91I+vEMc6iNy5oLkiLc19\nXiP/c91wp+CqWytCVJ6MQanE5VfWDvQOCSYPh9Nbv2AZXAO8wD42vsdIc1F5\n9Aqy5+Z7u8PWK85e/DK8kbf0Do8jLGmqcakc2gHlBDM5PGU7PjTY/FRArnER\niWX62QJY4PmwuMN11JUiv9nL74zALnCbr3UcX9sXHoBbLJ8igX+Y6PK6i0Bo\nFiqfb0K1N+Uv1uGxE2bdZdqYE0uOdcJ197HCjjJF2kUCW6I56lu9JaedN/g9\nNmygYEtcSLaRffc4T1JzQI03DZsmHU/xNlL33WNvQjRX2xv4TV7spP/sipPP\na5ixIMFlxG8IQxirn23sypGCBSOg7wCb5fcTPpKe6llrAxEoO/md5jQ1u9Ni\nLb+vedceGYfvyYnenHTnxudtnzCt0f+uulhtA3h/sCOUj3oiCkb4EgyV7VVV\naem8qJp9rJCSswFcyWnekYdjjqaFljgzqhaWX0TkJXI0hPqgU59Yl8mnmvSt\n3BEV\r\n=Uxob\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+nrj+gLcfyaXOpUH5K/ZjB558NsDpoi/QEC9hJ/jdAQIgXpuczjkCZ+b0Ebdc4wcJQpUF0idm840vcgS6Aor1eD8="}]},"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-top-app-bar_0.20.0-canary.bc846b29.0_1602699344028_0.593851620749543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.3280b686.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3280b686.0","@material/top-app-bar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.c71ebfa02.0","@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-WL74vCdmXku155seJ39GGR/CH8IJ1ZT42qAUx6XV0CZK8DvexkT30IjDarNkXCBo/33LP93kMqvAUyDK050n8g==","shasum":"9838140327dd5437e092aacdb11a3fecdc7467c4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.3280b686.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOICRA9TVsSAnZWagAAXacQAJln5wALFO1x1Cs4mdA7\nJb7ahdz5Vlg4Kng8mqTFkYSaXmVTZb2wxe/jh8dB3QudByO1CYDV+oLn0jSQ\n19gXp7e8WP8jb+kg41AWNb1lt/Y9unGTgAq01mY34P/UIpOxZHbIC/uyhDIx\n3AD6MM3eA24MoBD+56VGH59jxmRjbLdxgt5jSStNBk/irC3jeb5r8XUo7x5T\nJXpEokJO8DfxWfMjn05qEP6vG6EteKxTKoGmd0dOaRJqNQ+L8BHGvE4WARq4\nM7zdc6HmpZLZJqO6Fja+fkT8KyqIn8QMiLWqGne6xzi7lpa0u5a4+v03okiO\nRi/yHSrSMn/McbvXOeoVgrgnGq/YulAVUA09xCRa0di/GfGvR9FXjo5c+OEk\n0DOvC6cv4OXqZIQKyxvp8PEWHeSrCtkK+zlyPfaRnWH46jCFadUBYcsvQoHV\nvntBLVuq0GeRSZAU0yDZgyNDbt201CGPcFsTwkOTw82Da20JmOCQ89ntMnHf\nXD4lVcQyHdd5FJmo+/k2nhhut7bsX/BHmLzJLSPjVlpj2BBEOlAzaI9s4YZe\n5ogZgIp4OW5FB3mclolQlt5cF0QZc5DlFA/m7+72M/gtRkvyNivyv5IOHAG+\n+Ep5jheJ1UTiO5Ek2sh3J+z4GZhwRryBB19e0XZiaFy+T5i9f4EgyCDQkBCH\nfnce\r\n=Gty3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOmYDZGLwwky+urpUW+LwVfCoFHdHntndk1ViJBrt/EAiEAw+k+cVwS1C0WN9ym0UY4pOoCOJciUJyddgPXgU6VMhI="}]},"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-top-app-bar_0.20.0-canary.3280b686.0_1602806664163_0.2545892068591131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.9e94cd38.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/top-app-bar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.c71ebfa02.0","@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-lVx68rXrtIoEaB1jkl5ffIQVRZfdfm9DL7aQnnjoK5wYxsAuqLuFUXYbzBZw53CwT1WW19+qT/0FzDpBZzLcWg==","shasum":"7da23951e1d5d859669d9c54301919698ba79703","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.9e94cd38.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig0qCRA9TVsSAnZWagAAJywP/31EFKqxeP5W/1jCmIkE\nVN9diA/XoIcxJMZS4D+v9QSwCOG5tsvWHywVpEI0hcIp7cgDP6BPDONfTT91\nMjS9QPc8eXh7yPv4xn/d1FaDZCfmp6x/Xu8zm0O2B53MGo4CpMhzzBK8Ci5U\nKhZN+DIO6M14dH1ealeOFG9CNkHhTLzSlk+Oj5qyP4ubKX/uRyACJ8mOlwc7\nUhI+JiblK5fFKhXQdZN5wIjQ2gKYNjOG8vVEPXLNzm5FGE+W5JD68HpPpa5P\nxdD/SaLv3RMMjS2gzSDxWXaymTBifnoJ1LJCqDERkTWdMYt2OTbNF+rfqycI\n3A7Hm4r4fKE35OVtuBO+6RWsCowgkUDe2pSJQjreIT7Cr8sZNDzq8ZJortIN\nkFI1Zczx+O/lPD9HeBCCUg0qypJXyPj3gC9bDtgz9WSaTNeO0mR9OvkOBuj4\nDTUTiys+YIOTUjDk9ppJrADppoSeJ8JmwLOK28lcAUMHojGWKtHie4H1DWY3\nn73nSX1pwmtikb5+yM9zVqn6NsfMi/i2sqWFDiso4ARqhyFfWrFGcknu+Eef\nkyGwSYabXkNZJTyIDuL+dM0xwgl+eCljBBOJ1lr1BJUswGbcPgIbVheMXrJk\nGOvDnAXe+tTv0fUfezYNJvNdF1V34ZGhkpwtSM4xC564L/sgshRIkfJli5La\nyZvW\r\n=mH9j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkkzJmr9tuF+O2vjM+mlRRdIt0XvoIs8z3GFKN6O5sfwIhANjYDhMLae6Qh9hez9TX2wwtaWy6o799QJANmlI1igk7"}]},"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-top-app-bar_0.20.0-canary.9e94cd38.0_1602882858422_0.5851768160693223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.4773c773.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4773c773.0","@material/top-app-bar":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.2ab716cbd.0","@material/elevation":"=8.0.0-canary.2ab716cbd.0","@material/theme":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-lxgEjre0Wrfz7f4nmTq5gYKtSM68TeWg9TCw1+a2AnYsKXWQ2UcO964dNDFYgprmLNW59TcBDWuC35WR4ylawQ==","shasum":"e476b019d21d901cf252828b07e22d733af36810","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.4773c773.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/fCRA9TVsSAnZWagAAPGkP/1pNPmGITWeHRw5ptsEO\njxxA6jnFmOijLRA0wNSzGcQzWhSdMXXp6/hVvetlQ4WBPvMDuXAmiraY7jfc\ny8bEVTT42TTVDkoPPtiQRlpvuw7/BWvCs7P/PDjhVclWOCaSvD/eiBaafR6m\nmPtaK15BonxId0rKgpO7iJZ4GdEQWsYbS2uCPUBr4jA5Zo+BWXastacff9Xm\nDhuECz+34Vx+If3TTggazpNe0T6m8fafEz77YA7CfaA5ZY0EhQlCthgmoZ7z\nMkbUvsAp6LdT9mjkLW8B8H+4uiOPEqj1zqtGzB3WvAwHEvL/s5/QqiyHyoHD\nYTdUHEIgkb3SkosiVjNUMBWQt/9DNvrhUqbFL5LQmcObwvc5QBzO9MKHe/2w\nLILnPAlD2jm9WXBZ5WceAsT0XY07YJBgZWKoa04rDqLfmZFpkqyVBt0eSfCx\na+qumjltLKwMRnu80mZmsGBe8NhOJfuQ05cl15OWc5fYCs4V8qdRQEQTi5Gq\nfjwYMNuximOdlUEm8lhjpUMzVxxxZCnH89kz2CZgHkms/1t51F6iV+tde93Q\nOeZOKRKLRaRjKWDyeN2Ay2cORGXu2BNzH8dt5r38OljKcbAifK320vi6P7zf\nIp3/noTFU7bWZqN98TW9nchOd3oD7bQG2wl2ZmvX7TixlQ9JD1UjLs4bL7zt\nd6z8\r\n=fq10\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADng3w8X8XrAmyhULtyx0+1CnZJTSoKOpXXhZnuwdyPAiAlXYp8n1INcCk2VeR3nt7DwVSrBls5Ym98IECoZ9RP/g=="}]},"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-top-app-bar_0.20.0-canary.4773c773.0_1602887647045_0.3059582406422461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.65787913.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.65787913.0","@material/top-app-bar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.43c1c5e2f.0","@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-KebAw799ZVEOEjSbAsI1xZqhHmof0cubCHZks2L75SUhG2FyxRIZU480kdSPg6IjuBukwArX/5psoamGqgwQyg==","shasum":"b239d08afdab07ebf6ce2fcea09974df02328482","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.65787913.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeANCRA9TVsSAnZWagAA1nwP/332+4UQq3xGmiYquho1\nIRIeh2kw3Z53315EaCZ4Mu7rVhJmmH5WhXB2sVmsrehrLwASFHcbOWHJ4STI\np08iBK3TMLxhcrbx2kQp87u0isOWvL32MpyGl8qyB5n7tqnZXB37gyvwd6qr\n/yBylK7fGqPMsddZqg8BMjWNNgXdzB0vLZNf/a8R3LGvzomj06yuHBv/3rzd\ny1830hsTooV1yeAXC5RLgI4WZwroG5hvLJSXr5J48aUR7ajtVjfd5dfnedL5\nFHXquh1wiy9PFYFw0x2v6ALfbX5YU6Byql5T59ntj7g4l26zvHnJcO/nYf1d\nZHGy8lKsgBL9VBB4AbknH9h/Y4UJZcK2D+6Td1PTqkIz8GJtMJLEp0aP0Z+0\ngBokfNnv2+DDCEuNqvYuV/M/frbsEXF7Rlr6JvanQP15q4DcjpgiBbimxQZc\nTpgjfpVw9AHHS10L7DXCnl5JqF0y3qYC4QxpqrBHKtTWqSGvvzFwJ8nF8Wzf\nsmkFc2+536p2df7D0rHDM9RuyfqelEoT2+YBW1s4bfpVYHNFPBnGZ3kfFTO2\nMnj2QUv8iBugrh764uJNhPU0HCvIu4Q3lkUYomswfr7GPubbdbwAbgKF/0m4\nSNxMv3iWei8BNmBXMwzpCAkQcmxE/B97AYxoSkPcNzupKDxwgvuAVxRdSHBP\naAME\r\n=WldL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxw5nVTTGlopO2VRPNQm5lAFvFupD2tGwgLalCw9Gd+AiACJR5ssw4HOp+foJfX5qW+ATQjIIkYvSBhKZrWgZdfyw=="}]},"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-top-app-bar_0.20.0-canary.65787913.0_1603133453089_0.5985430778478538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.5485fba3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/top-app-bar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.43c1c5e2f.0","@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-eK3jOlI6k4dYkqcp+VJ6Uo09u7zppFFz1ZtiE/yWWVmY8oxPhroUlsN7MArgSfSdC6FXmwcRe5hCyJuEF0yTqA==","shasum":"0a24ebc2728650658e8b7027983f89eb46de48c1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.5485fba3.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgP6CRA9TVsSAnZWagAA/3QP+wd50m9vz4TH2FgiFsqL\nkXdCWJUkzArkYGFvavGVN/j9dkFqYNSgSZF1xvru2p3KSB5G0RHFAMFPA3FG\nu8Ox2yWimEYRpnsiPQjEP7AUrVTIN6xmwblr8tMJVkAUAU4aH3ObU0a4OV5s\nTnblrxqcV9Eg6jCzdOFi75Xhc6P0y7Lx4ereLD4mHgSWxThSHMd7l1N6uPg1\nH8E8viH6kGeGmnP/Bo1SzsHyRhfrAh65QskHnPlUwhrmWkMmcKfXJQq8VS0l\nwlq15RNOzxzw7jNschtJqSoGP0RT/qsvFQlrfkp7+AgrVJoDw/SWGkW2tEQS\ndOG6rdyC304XZ/QXU0RMhbkXJfYjj7LfENbFKuMm+Tbsjwy/jns1bqT7nUy7\nsJtY9K9AdGXi8jZtJDJKJg5CIznIKei64oijCKv9/VE+fnymjPc5H/23rsBH\nwYrW8v4PQAgHRE7qd5ji+3v/+87wgRT5tkozN9SbgeBT0YrqrUt23jysxGqC\nQcCb+iBL+9AWBG0bg1lupd/ruVrNfwy4lUpu/1DjG4i1tXLo1FkznEsEfOxx\nlURdVe1UgNSHb25iFtHV5WEu0T6mwNZOnqDvFSbkLRXibQt2B4ycDOIKpRjo\nyj0KatIpOWJ03dcGbcWrhDpJvqRxZrhmhYL57N1LorVVhgZmRkQ1xgNqnCvf\n+5S4\r\n=Wfk1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH13xXlffvqXOVS6LmOre/6OiYRC83DNnewF6rZLMRWhAiEAv6lysq72SVCKK14JpqysUcD7LKfgA3zFKoQBaZEOfjg="}]},"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-top-app-bar_0.20.0-canary.5485fba3.0_1603142649676_0.2972727063187732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.a39d0a92.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/top-app-bar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.43c1c5e2f.0","@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-3Bh3QGLnO92hbEQBFW/5tl2Q41eHXK5NwLndgfpEhzXxXsVAVNs0fmhkp3AScMVmGevuM/yySSXsOJHretpY4g==","shasum":"58655463ca992435b698c03c80795b14a96c7285","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.a39d0a92.0.tgz","fileCount":16,"unpackedSize":65399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0ngCRA9TVsSAnZWagAA8GwP/1qEjjC74OzpIs0q0nL2\n0ELK2k1UaWuFDxGF+Tacqvu3gMt97kC4UFa7P4sVnbaoZJHKZwMvB2dNZAWD\nxnA5OJAQx972XWp/L2Lx0EsNwXtILegXv2ODQjwd4UrZguhWWAJIaruMSuIU\nKzQBwnh7idRcN3G+JEWJs01g4RbDmF06KJFewH0ItfsvvcoFMPJqe1gvZEm1\nVE1GQFHzcrvx1UVApt7/WBnApVJmXedmYSflHgiMRspj3XvNgNxFA7xD6gHK\nk3OP2fkLD4W/mf9ypSyQr7guOhpxmGtaA84kLnuhXI+AuV6FjLHwmTTPOC8i\noX45/UqcovweL9Fgp5FJjIUL1KVsat0HByGlphAfThmpavEv8kAEC07R4hA5\n5exh2LF9tCPrkZ6Wq85sBIHFJ5hG/DR+RiAWlpRnluwpQW6uw3CtNsdnMa9V\njP12kAVxXIhvssTVyT96N6A36UZ7ZIQr7EI5jqxJd654u2yUEFBkQrLpjZr/\nrj+Vj9TpTz+9UZQHq0totXVkIsSaf61ubJIA6lUjprIobHfibRy//Z3U4XyW\n3PUj0AZQfTnBfZffl6ZrAuPSjAJDNsUxdVicCWGCRll9uPWq4bS4QjV7y44L\nKT8aX7zbPaTwGVydqltx/hiYGYT9P5JmcTZIuqUSstsLvchO2x2iLPuhdR1Y\nuP8P\r\n=xYp+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzCVocKtwLL5FAAuTVXQkb/F299M46pEZEDlc7NHkvhwIhAKSPT4olJCEmxffEAORVCvkvGGCdOw/I3C5hJwYiDDpw"}]},"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-top-app-bar_0.20.0-canary.a39d0a92.0_1603488223462_0.8725796135592232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/top-app-bar":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.ccc64eea3.0","@material/elevation":"=8.0.0-canary.ccc64eea3.0","@material/theme":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-mum1fkEgPsozsXHqc8eyGz+CTxoWO/jrcGKBQDMcv9A6dcHvOalxco7pOzgwSn/qIeLRtGurhDhz1NZO5E2DKg==","shasum":"f267bff1376fc269795eeb2a828a11c59098997f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.4eafcbc1.0.tgz","fileCount":16,"unpackedSize":65595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3X3CRA9TVsSAnZWagAA+z8P/i26nqkpej33DDXKOtdp\nLtW+R1aKJChfTOQz+i2Z1ANuiGLO+2jG0z2mslrBNgakEWvpLi0YpGWw7cpX\nZUWf11GSV2d+cWyBO2788a8RICGG5dHEjkeGZVU+1veZFVZdLJ7DFWeerGb6\nHKoduBsUaCoALTDoNrl1fJztPtGm+0zwJmYsoQk6VYA58zANxDni4VgOJtki\nn+njrQKOJZj6L0K94nM/S6KwV0APNktGsgJY8Z3Ft7qektstmKRpbNfT61eY\nESijx5wJr1qsGd7wN57Zq29Y2yA6ZPFQvB8nKAtigEaRrhA3WhnZNXhht6nh\nQWxJv/BE1W3eBoEZiHcm3hiYjfjB7qEFycW35aT9Wu9MqPZVm7MmWie8mD6n\nxrV/pdMUZT6OglDCLPJTjXuDmYSNmUqBXWgyvIJgCp1eTigAdNxndm2zEbfg\nPJvJCZnCrwGVrL7L7P/0XX9N58XiNUp5vDAH9t1k+Mm4PAgDNDJS7e0vABWf\nd2Dic8LIOieo7SjGPHkmjh4pkrMD2sbRrI9qt+YW/TcLWvQmTQpr9x/QDVXU\nrpQrOVbvC9zV520r1YeD4yAxOxyX8+O95Dp/pNcQgOD/JvuN4sr/LmyGODvx\nbAw4Wqs2+8ViHN1ECprgozxeKkTGZ8KlqjqoYrZzwctX28F/MkO9XpBaul43\nMcpz\r\n=UeQL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANPN/2KooyDK+oANEaA+CY8s9NosR06TULHOdI3N7cFAiAExm3TgVt+i0kzrkg7BcN9s6IBouK32eXjg+3xgjtkxA=="}]},"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-top-app-bar_0.20.0-canary.4eafcbc1.0_1603761655141_0.1418944844653831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.32961593.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.32961593.0","@material/top-app-bar":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a79cdd019.0","@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-TxLvoR/5VEIoamGcxC9v0le9sbNfmPZfN7uIcuon3d8i32g0qnOF2ChzicjSqCWbhSGd5v6nio5LNuIgWfO1hw==","shasum":"044041a05af54ad2117c0d266c878bda5ef45e7e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.32961593.0.tgz","fileCount":16,"unpackedSize":65595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL2nCRA9TVsSAnZWagAAtHIP/ivwRvfM42yeL+Zsw8Vw\n03RG0fYqrougYX6FqadUO7ohkK2TqgAl/aQeHzqhown7p1MVgkOoGNxuFujZ\nX3TSf9jX47eYnNbWQyQykU+7eNhrmlUu5hyds/POF1yk9HUCCqJcoVUF84ts\nipHjnjJMwbXpW8h5TuZiQUDJC8JjHd8l/v2qpc0XbJyC+2a7p9CrwxICUTds\nyPfhYGr1QoT8ZpXJo1Vb5pzJxjCbbvQCFmIUviPXLsta8oZh5s2t2ivffl5K\nTFJSOb5IDJEaQOYij2F6Lb1GrPZFUrPUv6/koPmsa59ilrYuZrweyaxWm2Dn\nr4V/I2q0NWup9my+DBYGEzfvCMN3gUwfw9j/j13BYm5pH4pk8pvgWcV1SHCK\n9AlaKDEEOYynxWi8fV5BmKsBgJtkSVrkFV4c++sTvXRcy0HaDeWd9Wz3Op1V\nAxbQ330NucpPXswSbj79acrAjaSmLb+5pHdB6guuJeRobV0yjcQdVxd8dzPl\nki/clr77z0y62b9GXWWh9R4SAkjvj4Cll1363esqsGOUbqU8AYJoRTEHK9/j\n8fHJR1to6ZEnRyd35meTBDBlxyJSIAa1KhLBpf13jHiWYFEzlz+9RdoUFkiQ\nHpgw+UIuAvVzbfGpT7Unsrv05qyTCOu7G+odY9ywBLj7ggxYjVv+usX0G/FI\nI9N2\r\n=0d2+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFG3p1FIgB1zKWXhjia8elQWXudleW9piEq8g9Nl7e5wAiEAtzjIlt1y+3v8ixaAN48HJALadNrg7CzQgpTBlL0200U="}]},"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-top-app-bar_0.20.0-canary.32961593.0_1603845543025_0.06930158942840392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.8e3a0601.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/top-app-bar":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a79cdd019.0","@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-N4FyB+Bl0eBWntCx5PlAZefB6i8J9ezBgFsM2W2WPpWiI3EchTKWjuBDuClb97CWz7q2oyCmVHhlv+32fYdhCQ==","shasum":"b22b2227d0a3de6d18ded0c383b459ae42bf80cb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.8e3a0601.0.tgz","fileCount":16,"unpackedSize":65595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzX0CRA9TVsSAnZWagAAxokP/RVBQ4Fiotq2Ge0N49Mf\nFElnmHRvLaYWwN7DcpGLV6TP/dhevkKBoHT71eQs5/+s0norIvSeFaCRtKRv\noSUi4pL0nvL6cGrIK1NsvLbJ4PJGKwcxv729uxuQvnMGm04JgsiyKNjQm8IS\ncKUBQPKdczaAdNiLyqLYXj+1puhd/iULdwDAVlms9I+lyOBIm+79/cwAXCN0\nJlc3pMQnT3Im7XxfOt4V5txYgPjQWwQtz2jRYmjWjLf8z3M503KjQn01JiwE\nQ16CvNK76SgF8fowk1uMuky7kb2KCq8S2w3atQri5fAmEDKosCPHJw0quTVJ\nfj0Gs1JYVn2nHwJJxfA4xgIo9Fj6bTNg5eCnDpmBIFwDmkyh6q/ZJMu4sAkL\n/2AUNLQ0zkW2QvUZfZNKuIDsqDiVQIUL5KhO0G/ljyF4PhqH7rfG61PmIaXd\nFgp9AriLj3Eqhj8ipbclzTIY7zheutahn5v35it/+mV1lQqYRV3jH/dQBiAa\ncII3xbkme8Wqbq5Oa6O5+A/QKuQ3mUQuBHJPxdTapO3fazWQi6c0sf927gon\n/aU6xeMLPVT/rEG7jZ5fGIPCdNjEftCounsTD7xv5MNM6J78cIrFh2rZzQp1\nxWyplvLsqlZN1q8fu+nfxYVgi4PBiSXeKlMu3tDHp6lNB6TDM/gigXm03yDf\npkvn\r\n=td1n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5vaN6ZfanGrtGJ0QWrvgGAp2/HPMucpOSNRiF6c3o1QIgftsP9sXKZJWzRnnNLQQBPSBti26aB/XZJnku4QtKJug="}]},"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-top-app-bar_0.20.0-canary.8e3a0601.0_1604007412126_0.5665919139360318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.178c25b4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/top-app-bar":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.6d9648ab2.0","@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-oVRqrZtfcSocqyvIwiRix6IuX9rcfB/NJ4oJFRjbc3slEO987Lagi0J7vueAmWBUTiCz/IbNAgon0EI4oxwq0g==","shasum":"28960021d41d03d419bc05cfc296f241b353b572","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.178c25b4.0.tgz","fileCount":16,"unpackedSize":65595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzklCRA9TVsSAnZWagAAkLoP/jmACGlhiprhi3tYAuD8\n9xB/dt67zlfcxTRCWDGIN7FmeMKd8IlfpGhNaiEWy8ccDCGuk5jqxi8VagsO\nF53SfeQ55BU1easElOfmvkaKl1Zg+jphw/26TzVfw11UDxyZtJPP4F8yCArS\nchOAPEOQ+bKxZd0o8XXNjuIkUokcD5+/WM6TGIVPjScMQs/7HkLwKO5p+FFu\nAsaHtkQ+IGI+u9c/0ZYRxyGaHVuHmqvMN8QOlKTa7Cbalfl1HGSSSwzCq8z0\nh6f8MuGKhTq1JUUwzraVBtGN7qXZIv0SdXmEKAMTRd2rRtRJYWfMzaqqhTCB\ny7/gFZ+5BVjwRUFA27vReC85c8FMgAWlAudetdZSQQXCUT8lE69wPsXbptB+\nBcGiQhTv5hioD3Ne8I8S1JCVb0Mk0KK8EBOp1/G3h65E/e2vyCAg0b7l78Sm\nabhk2ZqJe10MO8tjuS4Ug9ksnhnHEgfING1VImfsQGGa/mn/okQtA7OjFkgp\nyuNsUuAtod9OmPlfSZpax3RLFRyXTi98sjrAbdzMdn1AB3Ai5sbgLO55WZZF\nTS3O+Us2TJxdlBfkEga33cvwDejThvPJPLN5IqxEGvVV0gJDahpOYrhfnBWZ\nD/Ijw3TwmP4j2xIzzJB9PlHLNY7HkzNzH6g2Bf0gE+af79VniFH8RfPBVixj\n3gDc\r\n=lAIr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAgRxjVhbvoFLtdIJp/emF6m4nKXkFRXc1XFCS59QNrBAiBQRAXsisUHxpedXbTZgfBYEPPDBYpLOsRWxQgmXeWpRA=="}]},"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-top-app-bar_0.20.0-canary.178c25b4.0_1604008229087_0.9086112169519109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.124beb49.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.124beb49.0","@material/top-app-bar":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.6d9648ab2.0","@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HNyNlesz6j8cFqquN7v4Bp6SIbf3QdfVEL0Gqmz2kFnPbIZBfhwJiidrmCI1Bh8XA36ks/Hyr4yqviWlx+ZSvA==","shasum":"bd063f98247174c34e407d4d0d5a017ea90e2bf3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.124beb49.0.tgz","fileCount":16,"unpackedSize":65595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqGCRA9TVsSAnZWagAAnOUP+gNSkRqrzXUF2zd6YAp+\nLg842nx1jq9PQmKIsq8luNyLFufsYCRWtyR+tUXaqv/TVIhE70ac5xkR+z9g\nebcizpi/6UFrIJnmnmDxDJC4ANY63+PYsUZmdzTTTJpLi0EgqK/z0AmQF7df\n/lpuBWEotwpM/utaQE9oNE9wAueSfy08uF2iVV4eonTW9d3HBtL986BsA6IY\nrRl7fhU10VRPNBt/LRW7cdnqvd9jQcGdCBdXxfq+pZ7Ju6FXo5YGx4OOdHz5\n27gKF3Yyvw802iQ+UpogyPX+VxWHEFIyeTx6LdbLRmjr0pPsbePM34RScMU6\nccMvBmpIkVwINAeC7begMQ873rnsYDCQA1QBoqABZcyzHRMt94BYb+J4P6K+\nnq5zHIIWap+W3F3SnpeoXmsOUEk8Pk4epBCwYhZDFuUrta/mzDC3envtGtcI\n+RemLgAnS1SPVYeHS15pLJr//f0+l8xYYjbwHreMqfA+JuiAYDT+yRs46sPc\nADCuEP4Gj5ieYQDz4e4DrsSlyi1SX0mTopMOisgcGUvRpjRTgwmbPib9n4rY\nmPws4EIoe+HCVtTpgZ0CZFiNuvegpVEK5CJELU580VG+43//O6fNVqW4jPnp\nemeZOyFokMgYS/SELN46GwQbszLumC0uhlnzNFCGBIszKm4OTISAmfewpb48\nOfm6\r\n=A9hf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEPX3AeXlBQ7+H+oBhEm5uezSKwI1dOkCxgMMFlfat8sAiEA1UnGD+/nJn0vaGVW/E8pZtGCLgHlw5+zz4btiYU7U1I="}]},"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-top-app-bar_0.20.0-canary.124beb49.0_1604102789715_0.17670790204961873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.5937f468.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5937f468.0","@material/top-app-bar":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=9.0.0-canary.d6b5cd418.0","@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-gixCe1zvrgtBe+EdX13eURNWpM/hV3qZIICkkNMG8FFmU7YSTvpmAgEIqi2FoevhiQE/AAHdPFToS+Sc7jv0Fw==","shasum":"41f1fe5ebc537d88d83b4b90aa7f2f2cc332c365","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.5937f468.0.tgz","fileCount":16,"unpackedSize":65595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxefCRA9TVsSAnZWagAAbscP/1DbVU/8r6PgxQKz6A+r\nnKs+UC68VUpgCqtqFwyPisS7kBK4IvxzOmXHMxcy4SHsAMzUop3vaXqlNyPW\nyumLAYyhOzJSpG7pvftKm4JUsKC+19hM0/flMOD7hocUqq6UpOLciZvi3eFh\nHQ9dKnh9WbSmAlzdyWwlKAX4wn48O97jvUAcIofpHCNQAOQxJPdzPbmi7GRi\n62KVSghQR2Uh5H3h7V+NqGumVSk/R2mFLer4HmC48ML6F01tSdFYStFVNkB1\nCa5+bLGS+V4QblnmFwpcPNVgUwW349Vnp1dt81hVOFjSHKzF9+7tijDtjkvx\nwWmkGptdw7Is0ICkPNwo15jkq2ZAMo16RQMTdOqyjCWX9BIq2hnvav98DqiK\ncSwBd+21CMO43TLBR3ze/4Vq2Pya5wz+eeTegZFhUuOxBaoyH0gbHgdpfdxN\nXsDq23ScOJZCKFig94i6/R3otjqpZn3RkwIVEk/iKrMjD1gYN9GDaaJAPriH\nfj0csfi1yktiyVltLpuzjcpMEv47D5Ofvtx7HgFg9VSQz129ja/uU3j+zlzv\n42IqeBfXvHckLJyxNH6AgcN4YOHVb83LlAfg+NaJjaMH5YYOjCJNEdzqeBbY\n8A8dMfQdZKsPqlzB3nv2N4+DzB73gFTAkIOwKCqnXXyaE4wbvfpm3o8+BHRq\nK59i\r\n=gle+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCh1kXzXriA/QZlyaeJTOI9ka6JU5N5MWMfAp9aRF/nBgIgQDNQge5RA9a2XSRtg9chsthdbv5uSEEg7rFqvcuL5m0="}]},"_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-top-app-bar_0.20.0-canary.5937f468.0_1604523934919_0.37477749824303075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.a9bafaee.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/top-app-bar":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=9.0.0-canary.d6b5cd418.0","@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2mTyLOKQhfmXmWcxXXx+N7NgIVEwR7H6nkeamHJbJx/4hn2yYc1lwu/KLfUkiqk5ljjwGm2ITPaQK8AXSczATQ==","shasum":"4ae0d2c8f9f84a0504322e85862844b98e70f34c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.a9bafaee.0.tgz","fileCount":16,"unpackedSize":65595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0TCRA9TVsSAnZWagAAJbcP/jnTHa8rEiLkopN/3oCQ\n6vtv58G/sErahsrefwfjF6++JhcdLSJXvSCs2w1r5z6xKHpJ+SwZvfmQic2b\n64/PFqu+pzD6WPHMTJfTmZB0IOk5gm3TrXj/g8o/IbakI3K4PBDonhd1ieEX\nBwwDH6LDr/a0nz4ZnQc545FH87pDi2eMqzONTALSFtozd1pyTtOy7cPD4iVa\nhVL8uJOLzfXdeuAsLwTwl1H5xJ3Vjk7xMHI20w/wceqOH8LcvwX2NdhBy1yq\nZSrbJDlyZimk2+VqXtV5PdrjXGU/9s9piFuO1BpOKqCURUDXjfSyjHvq35zO\nf3tnUUcwgKtSU0Hzzx8ugmUBclMIHX9pvFM6E4TLeG/TmtlpXYlyKUi+wMeH\nUKkHbEXaXwqR4BIjKnD/DdOaH3gh1TdoMUc1TTIbDUI96CPMOKrRknS21Q67\n4dtx4HfaRFkFLtwPI66tO1o0gFM/6YBIenqqIFa6iwQBYe2wa1ZkTqS5cxDi\nRioUXmPj8LsVHUM8txP/VCnHQ6FWUIATLIvqxlA+ZR5cUjzveNIOxjq0yxJR\nHDKZthId/dw+GlB88rtnt6DvAy0W2t6GDgK3xowru5jQXwjnsTMGjVS+6LbO\nyM1nCfruYIYIcGbquE8MjyCaYNUyEVkJpycgObOHkqdyIxwlm4dvJ4U+ttpv\n8Kmm\r\n=haNE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTHemCqCfAfrDSjBmlOMQhmz00coXzEt0PgFqSUfhCBAIhAPmIGT2WZJ1pjWSu1mfvPsuyi82zmTeWuFnGx+wXuEUm"}]},"_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-top-app-bar_0.20.0-canary.a9bafaee.0_1604615443189_0.9979881143645475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.184861ee.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.184861ee.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UCAEggymQo9VlYw2DPliI7nNs0qVIeKZrELq+ky+PWOT7Fc0Umm2T1jbKOtjOAW3Nwu5ASZyzZejBy4chNr0/Q==","shasum":"4d141f1f97f41933b70fb282547be87009b59eed","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.184861ee.0.tgz","fileCount":16,"unpackedSize":66325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexRCRA9TVsSAnZWagAAgPsP/1JcLZaAhM8VO7xwv4ot\npfhz3SgyHXjf3TbJVusN0ZlGsmnvrknYKLF4f6YNu+COXcovDXk8FoDm42QA\namgT9y96XYnxY85vTnBpBCKA+md3OlC86tAJEr93SSP/3dgEUEW7vRQTtEY7\nShThkf+x73pWiXDafGJfz8B5CcOzTAgd7pohgE2gB12zV1LzYOlv9/+KOahC\nBw2DIPi2nMNqfw6+a7pJ1kYHC+oyNznx0CfXdt0quKypNj8P1YLx8kE7O3YM\nstX1f/qISbYTg3L9OeKZ6Qg5Ifh0OiYnvKw7o1xXL2G0vyngH1MU04mmQr2G\nRcx/MOs8jsk9o8JPzDTMtzXba8zKXZyYg5Ylik16kkJSuUSJETMBJBwOBZU/\nqaq7fh+Qe6iNI+HubTw5HzvNb4jrS/LgOzoGiDuo/0cJiMiBUa3elbne/r+q\nr9BHDN7irK8rBWBjfF4AM1JEwQZseNrwd/+BjB0Ar3okizhBpNah0jVIMZ5F\nkAlcU/bIGliuATLV1/DAYnYvKN4qs23X/44PPtAQ/4h/RXZFbxLz1UXvA5O1\nmn2OMVV/x7FiD7kXDhy1NV/4JBk6zftyy5kQwidYzevLdtAlsUWCIVYlZLG+\nHM37X32ZR+4hAqwpXWBDDqIAyrvAimCecVdpRibTDlmsvfwBpu0TMlH0Tk5N\ncKAV\r\n=y7JK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC51/WRA4jntmxhDmWLMiwsaf9yNL4NJtgUh/fC0yxHuAiBWpQPUBcEETvrNoz7WhwSq/GwKijesRzco2xg/Dp3GQQ=="}]},"_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-top-app-bar_0.20.0-canary.184861ee.0_1604709456648_0.4858229179321101"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JlsnFwh7m3ysk8+Wki4i1Z+EPD0RMNAtjF2qnQe0ZgrkZHHsAzPAzmRjoUUKqAdIcysAqXpk5thUHV6Fc+AcWg==","shasum":"c7b3e557e76d3d2b76911f6f940e00c9e8995ced","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":16,"unpackedSize":66325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT6rCRA9TVsSAnZWagAATmUP/Aws2yX2GyJYMEVG3mnI\n9Nd+jhRZORqDdAWNDmfnerVz7NJLpAh/ZdizenK6OvUf8XCIUOdlFnvqBD+0\nnlrEwd9GyOgbJJDl0DWwihF4Hm9dGq8d1+IXhTOCH2XeHd0sdcHVDECQz8xo\njPmvLjTtyvezDEAdFdxDku4dbb6Hfz+YG4ncKV2dP9kzN3wiRGHxA+w9wWV2\n72p6ocw1QY6pTEJaIyRqQk5kWQoNkSPOJc+Ei2dvto1XrbkhDcPhMLA3Ip70\nF5vHlfgS8OAwnhvSe/LTxWidoZWDSDQxbXRsSAzAssoDhZGuHOgs6D4I06sG\nFWx7TP5F9XBCmRYCwJD55beDJYdzLzFw+dG9Z3Jq5C75g3CQylhgviDW6yBX\nSNyNupZRhPirBxsmZdr6fjV6sJCQCvDR0oobj4OzHZjmfOzIp5nMr1WmPonz\nzSk9Z/ymqvBOgIiB1LswHCOqY6dEe7zUjXtt9sB2SKjsLeTypWsLkHAmDIlw\nUlvYw07VanQkX7VJ2yXWQt17+tROMXsPe7ibWOBYy4vUivZyz3gE4HDxaD8O\nmIWUk69NZd0K36LtBvQUn24qEqwl9/eHT0E0u1m2MNGTxIH1aaxMktlkoVOO\nln+CIXfs22FrDizrh2lnG/IFY9h9VTvrvXdjBwSqerxzZpqSbZwQdKk8+byZ\nvKBK\r\n=Ppf2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvjUXSyKzG52Lz5ZNQL8mxjQrK/p2Th7oz0cq5CgUNfAiEAsJjl4SbTqxC4SZycCmZe2MulHirsopYnR9VQHwBd2Pk="}]},"_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-top-app-bar_0.20.0-canary.6c6ae2d6.0_1604927146769_0.7726787157573443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.ea2aa477.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bItvzjVmFQ4DUBXL2xwBqjlHkTqhUVMLHaUCPr/QJzsA3J3AXtXZml78al6mI5LoBb3xwUj5MQnUxlDCMZ2TkQ==","shasum":"b97c3a866f1b17bd46a4c52696b212dcc9b20dec","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.ea2aa477.0.tgz","fileCount":16,"unpackedSize":66325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdeBCRA9TVsSAnZWagAAWeEP/j70UIfCtFB//2nLfdwb\n4BBE0nNw2NWnssFsGVHWzutNwCiOQ2UXEtQRP5cP1vBMMEbXDDemRn0FeF0x\ne5XVwwsLW11hlx3W/rIttGRhptMHrkGh9EUAQ02DKYzShC+u0nUZgfle/qt1\nSooZJe7tZ4ZAQLAsv9Jo0KKl0sB4fx+hDMPSXRAeoOD7ZzKZfdDkK3tyGzSk\nCjpjmHnoYF4nAXiP5V2x33mGsFrx2iuIYL47s1sXVnL5w8N6+nNBZXJQGHZy\ngxhFIZDrY4eTJfXnKqKoYPTjeQAfoTaAV8lYhrUXf/G+Nl3ubVD6r53GudIL\nQGr5Zivr1hpmpyH6QJuEG857pGkvmZPhNzJ+k3ookPNfXw4/kVRP8bpVamFL\nfoWo0qWZluMu/geWnMh1HOA/ifc0b8quoAd2y3ozRXhsXbhckVmIfNc4XkVV\n1hsgQurADQrC5CeoUwYkaEMfg17Nv078IXMxMRDjlMlAOKIQMmPotTrc6ETM\nDFRKegrSg07kJVUxdL9XRCRF56fbg7mgnR4SIUwVeBRVkcDUknner8u2A91c\nq9vn4sN5oiLWG/CMx413pO2gRS4N4qpxoxgT1D+NUo1jFr4MWVwWLPiNGRn6\nJ3kGi2P+J/WiJ1NduMvLVXuPnWivk3mtYvLoKEv8421MqUBI6UoTZl8BLkSz\neAm4\r\n=5CsW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj9ulaIkR95FQPSI54lkOzm5cRv1BBK65w2VePwROZ/AIhAJds6kWEclF1jJxlTGEVq1vFIKFItiynIK0vgqP3RHT+"}]},"_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-top-app-bar_0.20.0-canary.ea2aa477.0_1604966273075_0.6467790796067934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.a2c088dc.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xMFszKfJR5tzFnZmgfwEUcGzyOe5bVT7tTqMJvpCu+qOMxZ/BsKx3E0qmPmmMfMRJ191k8ydttwu3n4apaH55w==","shasum":"75c9614f00d31ad321408eacab50cd34b3b2b969","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.a2c088dc.0.tgz","fileCount":16,"unpackedSize":66325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqJ+CRA9TVsSAnZWagAA6ssP/3d42r2k0puRdgv2n8L+\n/cHt7zalSfL/wCjBLU4fKjLU2debCYvBa/Ny4TQ3G70m8/9+1HugZ6FAJXv5\nqpTs25P0BJK8XDoBnxRV5ZKDG4TtxwU6qSgGisxRup4JS2BgoKEWP1VDWPKB\nAFvVBYgJtR4HGruZ/IpnpbNVzP+StSfJ5c56Ep1kS2PP1hS3fp+of0B56UTA\nErJ0c2cPaYMYJYNvolRRAsORV6Z2cL5k5viheHB2NSirUS0WVt3NGJfFKdoT\n8AC05PTqvfSWrlH4wN/J7z136//UGbZEzQ90vjHTXfRISM74+cz2zmao50IG\n9tvmTIcliWmu+Rm6Sr7+wLt0o+6dpXZ/h47Zgo/UHYK+ila7/ZvDdKkhK6mY\nVsoTWYM1bN3dyPwHw7W7MLe4wiy37k0dqM4fVMgyVAK6/eln+DIv6fgIH2XM\nJ5eeQV80UkHSjuXBp5ezkWDtLS+fKwn3FM7GyhYFb+D1J4nue8br701tyINK\nhzJdUfaaJgyyBrBW7nGE8g03raD0baeGG2hN0Du669fiVUveHmqrooDaG1Bw\n/yUocA3/MBK2JXESnMgGkxdi3467WusRNXLXBUlaZ/q3M5YGASN5SLtIZfAi\nd7+BNnaqXPpg6Vs5UPCIMCTGyriLl1W3+AbwJytfi+v+O9dtttRkoGejEcrU\nQMyL\r\n=4aj5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSx6g3xxOaavrDfq45qRzWnCp2kmkoUAm9Vqj7bN+m2QIgPoPL19EqlGSvdLlU7Gqsk0tWaeVOo4JDY8k31zNeb20="}]},"_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-top-app-bar_0.20.0-canary.a2c088dc.0_1605018237851_0.19421943320283508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.b04d71d4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VbiKmnTVOpcD816Fq+iu/wIGvKyemvWUrav+lYxvkZl9l/qJj78Q0gD3svVJ3SMN9+Ma9MCtlUXHLrv0z7rPLQ==","shasum":"bd592acf964dac6f088e0574c87b9a58a0368e43","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.b04d71d4.0.tgz","fileCount":16,"unpackedSize":66325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRF0CRA9TVsSAnZWagAA7+kQAInmH8F7fbguZ949b1gm\nKzuOvtPFv90ByiGrumNli87cR7nFoVsFDW5zU9ygABx9ybXkjTL8hOOe4D6y\n2qYLydAzdkFLpUonx8o279uJel0enzV5wz2jsx49v/mXodiOCV7d6t9JJRj6\n15ucnGg7Wxzoc/H6T6Fsv1K9XGw89mf8Hi8E/u9hdsa9Bf3NAjv8LcSJKqY0\nNricwoMNPTavvse3f4eVownPvPaH4WMBioBdbR838LKNA9lveRzc+RGLqlit\nlLlUZKVKw9pC5gkwCf0baQ8b5wneUc1KfA7eoj4SfbL+ucWoC5FQMrTeyqom\nNxygcn8cQ3E+LgnxrODxxLIyqLE1t5r3bdvmr91L/VQnsoJpF7cIF4zTyTDV\nEuCtf3HWZDGoj4JBwcqdEqvRQ1ENmIjPvMbmy7F84evgfqn5A0Z4X6xqzBKj\nmU54WsG1Nd61f0EPvwtSUjoDCV7MfFIs1ScxVRBTLA7/3qyhMrvRPcHEt0cO\nKK11DrrCUBCP4QZsEtVWVQRaOFa+zKbWYqhEfbqBEWH2BC5GR/M8bCtU1Z08\ncKdUSh4ZAAqp0IOU89uyreAJdMoKi895RZ3XhQC0HTFU7QmQOAWEbjKqU98O\nx+VoymPnjVNwQ8BpY7x9ZOAkw2Ag5TO2LQ9Juo0/8e3oSgrGmSImdTuNvelZ\nNaxc\r\n=ihmj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5NdwmnkNI3fxWuCqiG6IEuo3AB17b7zyeYMvIckzhHAiEAu1Hyithc/3Nui1Lkg6FYTgUcS6siGGFarlzcC2mloFk="}]},"_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-top-app-bar_0.20.0-canary.b04d71d4.0_1605177716265_0.9480478317712615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.2c553352.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2c553352.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+0F5RmGM4BxFVgHzBAoDVcCERCY4B8v7oxZfI1kNfRSjypZovh5qDWgw0bbF66Jet3CPn2QhzV16nfMeuwVmXA==","shasum":"0817992ce95ab5922276b431abe65986179add96","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.2c553352.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbpeCRA9TVsSAnZWagAAvjMQAIb/Cu3qmcVUwPo6lIGq\nTKF3SqR24d3Gwc9Jepjz4toglxLSAJUk4R6SfFXrktRtBZ54SjveZ14AZn4J\nblxBoBe61ERBiemESGx75TLZeVZfg+avCxwO4t0hQDdTnAkXwMbf1ICA1Qd9\nzsU5KUgPIHPMykR+IIweRFVo5kCkc3Dnh6x5Sx+pyZg8Yx474pFezy3djjxt\n6Cl2raXjscb801TJ6qIhWzzLzpCQL6m2bhPlthufeBGKAz6hT+KdQk8+YidE\n4mVNpGAMTgK8+jpkFs5oDyAmv2cyyvyLYiXskGUgFVw9kKvBInt57BaI506i\n7a1Xq+4D/065tnUk5+q4aLnvLG5PpJTddPY6HH04QisjLfOWcMo0y2tBclx6\nI75njHsuJMRscpZwOa9FtD3pSBTdqAyPHXEcTFc39EobcNKHtyXoq8Pq/I7w\npX9+RQL0RMVS09yIDbxvQsBRyNck+tcBn2PS8LnMQI03s9BcDRLS+fInHURx\n0aPAwwEZ2qZI/co4HGCPDBjg6JEjJqREz18zRJ+nBYLrcXBlRkj47Q+QqJyk\nAfxLGVqqUYG60phAEKD4pDkWOiTfk4ry1aV89uEDwXbGqJr4LQ5s5IFqf+Np\npDVNgjUNGBJRTjRlOJZUzPO3lWMePF9FaadWO2HIoM+7sr8QaEnZG/JptC8i\nhVIO\r\n=lqiV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfSdCW63MvoN8hrSpzbUsWLE6VJqnMLyK1vd+Otxrq9QIhAOhy6tqDn6T0baoTscOmHXztM5X/I9Rzo13BloSaL8v0"}]},"_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-top-app-bar_0.20.0-canary.2c553352.0_1605220957883_0.6508703119747827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.6560d19a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/top-app-bar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.240c5f74f.0","@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-nJsx54IJzK8BFUY3l4bFo+psXyyjqFdIRbFHVt5QyxYKRg+Q1xKGOoBh/pMNufHexXjqq5ZqHKoIH3oNSR3RSg==","shasum":"6ee046aa65183a379282180b5630d00d7d4faa8e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.6560d19a.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEVCRA9TVsSAnZWagAACJgP/2J51CmTLhs/ko4dfX1I\nRFyuNuQw8FcdJo1QMwz/eLos04xAVfO5FBKPyn99EY1EQ3OVKR/nKhY+CHGF\nhXiAplZX9DAjFeSxEaB9GGpwd35ClH0CTLryXwZxQPq3bMXtW2sDDpHG3B4u\nPqTVF/wmXnrGEvWqaaJ5ySX4U+JbOafuNHmBxqrj5IUZ9nMFfxd8n1/0YmXf\nJb/Qr+gTTYLG/fETKYQN0JtQDJGQ1K/qbW7uL7whyqKAjuT9aie3fMCROE5U\nYmhS77rYIRmBz2MgObOBUe7lmyhcRUCpFeuiBbMooF4JOq56INrN1zR6bXFB\n/hIYmjuTBKi1y1KHOsdjYhZtFQdkObxEPZAxN11Ch7PEKrsxSf3O1wNp1E1B\npaIC0BeqTEDDI9xbYGVBqTlK9AdqiEUr4a+DdC1LvQRes56Gy/R5Qy1DPGK5\n3JRjXiOPkPmN50sEMoNjvgBPs06kcKQtODt8bxH80kfRSXZpdNgcCZwB6rWg\n+CjHsfCJruIL64jmIR8MDzbzKhJcSCtCl8QZwOiyiMe6G3ztFV+jYo6Yaz0U\nPQD+dg4XlCCXj00P8shAXoCO5GpyAef+kT5Ucnc3bjN/2kQxeANZEJszzNbl\n+Ms2YA3DypEdmC1HywBzDsBagFMdWeKXpUfnRVXxMaQhzOWpJrNBZMyD4XGS\n295s\r\n=TcWA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIbMp24ZiokRCkKfah0k76mFvd9u/ro/YM0LAW84wj3gIhAMQJt3QEZcAc7c/1aoGx0pimVl6FsWcPe/KP3hSkZZ+w"}]},"_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-top-app-bar_0.20.0-canary.6560d19a.0_1605300500672_0.3856224719911425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/top-app-bar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.240c5f74f.0","@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KGaL4jS6ckSn6C/uo2+YLEvUVd63C4EiELdYCV7rZ+sKbN1FLSrzyAtAuZZY9hW5ZYk0HdOe8XJHEdpzjr2WZQ==","shasum":"c0edc43fdb114301a59f1ab6b73b8658b1231fe9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.a28d5ec3.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+sDCRA9TVsSAnZWagAAM0YP/0vQU81ULAaa2a/aw/rf\nDuj/WRBccyGjIlFHM4WmyGolfR/JUebG9A693g/bO4mMrPvrM03qasDYI+9I\nRiMUXrdDixMKfoWmqulvEy/e35Oq3IiZi/+eojBzfrIwqRS7gOv1MiTHDsCj\n0MTSEUwlafZbahFHxwtcDixAGHxUQ0mZnwPdkjt8wktgIjdjfQtafh7ql+Mj\ncbT+Ak0i9fpuJF5qPlcG3zM6wXCBLJqV+xUsX751CmtnEJeZtOJjthy8Zw1Z\ntJZl1Fn/T/0Bgfk/+Lmp7U/e5dMdv6Gpxnb5tObuTTJA7j3wMLPedPJkQQ8L\n6QkX7Q4Z6EO6YTdyFw4uo2KuWg3rLkEzz4z/hAmR2GThieSYKCEIB+3Z0V1N\nAtOkapEsxsY155Q6z1E9AeiR5wA8rGGU3VHVtzkdVSGBC89IT8TllSl/GYUp\nOaBpMQoUR04wZ7tJfZSNJ+omFr04hqg/J2Eg1xtvWNf0hTYbN1u8yUBWpqbV\nFTZzfHB8hiI/dJIxWqySPjHbvMJIv0/qtcE6sFg+HmkPtIzbtGTpaeCgerWW\n0bJ7KGFIyDoFVbxQkiONKGdRE+z6LSAK5Lj/tKfl3aU1oJR8ds2WDGy6BUcq\nsdReSHWYowSpuhai7HbqnVqYUMga0q7ccqbyeknJKbsUBv6SvuOYVmgta/nR\nbviq\r\n=l6Ny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5MHlMtRtb9Vwn0BHuSLi1N5F8BfgWUmXmAnW4zPvQGAiEA+ifmeglwH6apz/XgVVrUAyZJtFSrpsupln0VrLtTDAc="}]},"_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-top-app-bar_0.20.0-canary.a28d5ec3.0_1605626627427_0.640101529108682"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.03e7e778.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/top-app-bar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.240c5f74f.0","@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NQFpjWm5PlMVA1Fs4xbqcce8JuMKMZ3kstMxBaWp4tOtqevPOGEXCmNT2n70pHIH4DLcnx4sYRe/6yfYSDjSFQ==","shasum":"dd27ab1e705afdfdc8b0157e85d5e9320b2865a4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.03e7e778.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCO5CRA9TVsSAnZWagAA5FAP/1XWdRbnyav4HzTd0jJw\nDNhF0hwf2mPYkk7LxxSYuPd4h6SlOWDU5F80616T5Wik7Yr4IDnudcGmL3c9\ni1EvqqE70bhsb9SUfRiLYDos3jx5keFZTg1e1z0UdWU7thr1aCfOza2mboiY\nMl3ZCQZKppd4hstwf9nOT7Dje1MdiI6aWMw3ygGQVu/ivMytcj8WF6E3aonQ\nml8fgHAeBiriMNlHyx/Ny5WyQN+YRjUe6TMe0WoCgMiI5Uv+dkuAs20zTCTm\ndn7H+Xzx/MW42GKIqXD1frzK8Ep6hdMsaaUfrKnvpBGgkt/N7VP+dyRyuxuF\nBwFCsizJTZ2LBF1RmYUyKaDIOrY7poJoWuh4ImPUXyj2ReQgmR5TShOuDbFk\nNM89yh8V4LfQLnwn1bm4K27W2wlM078U4d44Q4OISTdBvcBIhv4O9E2d73jK\nQhKBz9DGh5NHtBqRgewDcvQf1At80wswqLASg/43rE+oHnD1JDwZCd07vCf8\nYzRYsXXXGQxzlp58cxOSZWuo839cw0Bp+A7rOCk6+KdShbuAhLP+bAxH0SZv\na1OPH3+3MLXqf1rP0X/KXu6DxmOVUCKPGq/5499ujnvqVX6VH/GTEgS1FOBa\nv/hFioCVds/+R734zfX6c4yaNsQSMfIc83DPIsoXZsjh4Vx+T3+E7XQrcq05\ntD9k\r\n=ws/v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBfG1rcV9kCOx0xreUIvY+f48MsQ89IsIa5u6p49XAZKAiEAg8QLTjHSE0YM+WngrjLIBrOtqINMiJK4O4OOUGga8iU="}]},"_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-top-app-bar_0.20.0-canary.03e7e778.0_1605641144550_0.144088040390427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.ac8ed597.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/top-app-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-cfUWPg/vFrof3p3gD6y7Zv6G1WIr2fd/GMRxRKhOwhtxlS9U8xepc6RdfuZUIZQQcm3gZLZW5DOsB0/3RiNvrg==","shasum":"b6e6774162b58e213a1bd74ac376409b1e2feb42","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.ac8ed597.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqcCRA9TVsSAnZWagAAPI4QAJZZexpJ8koZhT4yhBu1\nyT3nDwhTHcw/I/C8nE/DowU14A2r3AvPePRYNDRSTecS7X47jgQDWn2vUomY\nSemMwT5TlA8bqS3lEXZqRD9wvjlmhWw8nW9p+z1I7M73WyWG7zp0xAvXqHIi\nDIAjJsnwrG69eJPC64/KpJM/+JFceWyslYJc9DJkQd4QxuIh48qiS1cC4K7e\nBG1TRtAWqnIJO05YlLYL/AwZIrR6lKuBYivL9R5NPkkz/5bVUftvwZ3Sa9ty\nmxttZxVRst/+K1kOxMqCVDeVfQDh0KjQMbfc8Nzak9ja4jdFZuJgZ9IzN9i0\nGHpwXvFrkp0qHu5y0DWeBb3IwuaSeLjJHbURw5R42B3YF3VXysspiMyuypE/\nxXtQChQR9ew4psiNbtiv211fZtmLBVBw2Trh+Fl9OLzSbr4wY8iQuyqvXZe3\nxsyU8ONilSM0mnZYxYqKwBmuzmZFAqaQq9SGUmLhX4+qVG6+NXQW23wyh6Hu\naszL9j9CwZ2wARWuZFh0L7Ss7lloJ12RBuGhfJBiKOwGiV+3mP6TnjX6MUEy\nLP/ApeueFhULeHQ1wOFE5urSh9U46et3BVuyqpwjiGWPv5fHSGwCo+ovgUFs\n8Ul44T4DA6njeSB4a/xhcB9k0JnMGhbdNM26P/7qyM/17ah3P6SPRvQ8Dmhe\nN+UP\r\n=htS7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHI5KEuL4ZlmKDj12caCTPaJ9WvBH7v4rNs0JmzPkrHEAiEApZ1AvwIxdtxI/jd0EIetNqbvPJRs5NGhwvDN41iuCUo="}]},"_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-top-app-bar_0.20.0-canary.ac8ed597.0_1605651099541_0.3990518430484089"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.b6a60f60.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/top-app-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-117JyY4afmub9R1ReiV6oJzR3fSyqTux+8MZBI73Np84OcUBQdaB6WT+huPUIUd73OgTlEHjz/0AZdmDOsGBYw==","shasum":"c85a0cbfb676cd6581f5f6e71ad8d537d7c87dfb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.b6a60f60.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQTCRA9TVsSAnZWagAAeWcP/079ZvxP6NsqKOXsNusz\nbnc6tN3lphvO73ZYhAW6YJeKiIfD7D9vU4uhhTaXAZ7CN0u25GXQtMbkpwm0\nPmSsjZDo/njktWazsgTwEJjZZm4O18LLeqPyEJmrS/p3TBQ/t1ArJl7yTgvC\nX25euFcOTpVs5AUnH3EwB/lgH2utXKzjriT80RNa5Wy2uHy1jjh6kyUaoCeU\nl3gsUaN6QDTw/HBWak9fttvdY2ZF67yWxuHLnN7gSMeOVkGwrbgg1yDuuTtv\nU5s8NRdowQI3CbTiRiyXQ6jSHzonlp5K7gvcASWI7P+MLTeTyU1GX1WTjzCx\nPK2DzxPeN/2cxFACRCEajJb6mF2LqO+yBuTn/KdlQK53MYfq68HAS0PTq9en\n36WBYhqBGmcCSu6Ml8osnXtJOb+VyXu5TH+5q70mhx5+B1Ubtt7ka7c8URmT\nTGEs8cpHnOK2hCLUIwGn0p7QSNco8/D2+it3k32keLzo6qSVQzs3a0dpeNwE\n0IXsqpXS5QK/ZwGVIE20PT8mC9RsfTEfWK61a5hS/ZwvlsLuo3Ku7UXRSdDv\noh8Jo9kS5xxe3N4S6qQuu4eUJE57qX8H/NL/e18WiO/BGPkCNevVFanQiFat\nKV8svV4qmO+BgyDWBcriwJMAa5aWZoBIX0jF0RTOqs8O6HYAdA3qNrAxTFbA\nv7CI\r\n=Sa+0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjPxSTgOKv7ARU3ix11vxUiq7yTzoLIrAoSkXmgjQ2LAIgbFncNVoXuIvRjQh5lvdLyNev8Br3UUFEYDFIxAzJVQA="}]},"_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-top-app-bar_0.20.0-canary.b6a60f60.0_1605653523186_0.5789149774445776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.71cc24fb.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/top-app-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pO8EGVTRILGWV/F1j3HriLdJOpGi5Sawzgl8+VYW7UCfxwSXSIHochUyEsfvbVyu1qguErZAd5T+pwIZ29c5NA==","shasum":"b25ec0fb8260931003ddf09a60c775b7b03ca969","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.71cc24fb.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnSCRA9TVsSAnZWagAAs3oP/iyeW/CVNZFDGUzmebTO\nyChp956HzMCH62IVlECBdto180Nm740cUsAnJFS6KpI81uP/rtsSBlmloAPK\nMxqfOS2GUPiCPQch8tPBORt2o4zbaWqXHahm4zDr9aVLRL/txxKlVYVhjucR\nnHwEXlX8437k4Vgcr7fIz/J5CiWZPmQXYs9O945aW5N43MKIZcmP+HWtEHC/\nbA0FRp2vOMOJrwiCiNBBMl7Bu4MeRojO4ADk/LXeiq9U2cOlwUL/6zNS+aiA\nylkrblSyEhubQqxxQvNOeYqVo9CSXqzE92Qf6BOzDj06KMkgFv9QStLX7SPI\n5HHfZASEyorDLeqqY2NVbLcUgmLuDpELQ+G/4X2KM6W9XkyoIIarg6GVCx8F\njLexZVRpZ7XJlizJOOwimbc8l0QSZ+eqmXdHZTctT4pq1hbDjM7NWksUJQmb\nyckaOCXOcrUtRllzBW5cMNApSSh0xant5Q6YGbi8MM2/N8EDP2Z/jZJQoE3U\nj1yddJfIgkQrrYOCEFA4n8wbwdNT9lKr4x3tDZryDooWeOQX0bpBxW5nu0m3\nWx+DkDxiPCWeeeX7hrLUkCeDRO6So6ZoJ5UiL2f5Cjfv91F6v4gwUhRe08RE\nUW/jEStj1BIuCRBZfvXbNKioRNqK1umj3c9JwG/GX/ajY4pK2vj/R207N28H\nAAP4\r\n=fqP5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDIHETUNf5RaKOlzAXctroQBVk56vvxAfmtWzO9M5upUAiBwpepsHfNMBFBALnqANbW/XIZED3r4V/geue/mta88xw=="}]},"_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-top-app-bar_0.20.0-canary.71cc24fb.0_1605654993737_0.7076725397632981"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.761027ff.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.761027ff.0","@material/top-app-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Z3jd6iCDn6JKXgEjkUx/poTDmgzAfVpUqt/iE+F4TXRfz6zIG9AUY33h/n+MMam55YmS3YjnYdtxFRfflEx1Kw==","shasum":"768a134c8aed3093b2763aca4ab28587819e1ae7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.761027ff.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZykCRA9TVsSAnZWagAAImMQAJADo6piQGlUnY7mJi5s\n47PGiVCZ+2LgTUgVBfr8wBggd2E6V6nlkYlgqCIe//DEET2STswg1NAIzr9L\nIldhRsSDuRMfB1JRLpLZADj4fqGn4qlrjq7r1i5eB3kPV/O82fDbOTAHWdCQ\n+E1x9qSdeIfaWRUCTqNXbSE99vvYpUbyOYhsnGSht8+BxtPtjBY/h+xiXc5U\nzexRB/9WA5RQTkARslqnNRv+zfvaRZ9v+IUbgLdrZHPbPtGfDI9VHiSJyFoY\nTJqoDyTYhpoAf1r+EHn1YjswpSe8FoZTfvXJ8j/9w+wazzDv7gUHFZV3np3/\n8r7tOrp5w2Eg7pefT7F8qDIflh82zyk0AelxV52DI86rn7C0C47LQqKFGU4r\ncN1AaQDDMcJHY9pZOncFvJxjm+qJa05bXeLlx5Rudt57GzD+8EH6De+fc9cK\nXvp29/YslyQi8q9HaUNSPhRn8b6LYjbktiPddRZ51xUMEtcdoqWnoKuLmgTb\nVNIXbbGjR7YXpdMtdR/pH1OoyoSFJilEiVGqHWvAHR1y2/5qYXuiPiyI3hWA\nRrH6hDMMvDiqI9sqbJvnDLz3wUSufY5qeyGat+kt3onWrdpTVew6kHIPsgk5\n/Ky2A9xvYGUw8bosccTYbrR/ChLL5ILyqKDoXo+yvWhlS6uPQB1r5CVJjSFN\nuzGw\r\n=y0no\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKdiDj9LhhwTYY8B7FuX83AvsEoBO2+SI8HVzrIrRtjAIgBaxfj5ihxAUOwY5pKQBaa+9ynuL/wBCwJUNAY697304="}]},"_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-top-app-bar_0.20.0-canary.761027ff.0_1605737636432_0.704290286890298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.dc93d04c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/top-app-bar":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.99cfb6bd5.0","@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gvFJBB2L5Lyq4xH5fNX/45Y89IVqfFamz/xGL7j7+kQbo1KFBiMV4SniqVomc9uMO3SDwUm9zKlbd9aiCztrCQ==","shasum":"eb5bc3b00af251c3c855496eecf1d2d8d6b108a9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.dc93d04c.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4DCRA9TVsSAnZWagAAMAsQAKHdreu+gcY+vUkA9wrg\nfdAbmTz2OJHqz17Kar1fMH82OokXv5vq7imPEXXZ85oRHoGEjjyKpksZVPs/\nikDxOL+nMr93icxQQ7MG8PdmvaH9qvt4b8AzmZAk4JHFyfGqpxLmdvx8Fz5j\n+co7NLFDZV+bRJZebaigjzm50ASJLbDygW8kS/DP4F6OeQj//gExi3fjjmw/\nt5B3tLt8uHGJ+Z92PI0VHfPYr/hkQjrQPOKShsMdir4jhom4Df15t+68rYKb\nvRmhncOLzSIgJtYUy9kmV0/dQ3/k6UzWDl9mhDvsvXrKj6v8tcWMiYQyiLTP\n314yBwh+OiE77xgVda9LknCQnHzltr42iFi1A5+7JrAtm3vhk4EdCysC0HEX\nCm15I0Q4uKhrRFaN/249oCAl7bGw1+UXAch068CQZ9R1tKcvVobhsw/JJlLg\nv5soDqIo+8sFMK8U9cdyYY4HzC/A7hxP+CSaQ56abdAZ07saAUdiQRzPOq3b\nIUG4G6KGlADswoF3mxUbgSOyI9kba9HOENnFcYCkYP6pUwfkukGsAQ75ZrX4\noFS5hA9JwfTURmvLY5ISfNjfV3htT+4j5ey/VESebWl+ulyd3sP+z422s/MU\nKlHwZafXdw6WADCghGvPzvwMz/Yh5JMFATsUE2SY/IKeQ8rLZGAXwnK4A9Jx\nba04\r\n=J2X3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2TAJVfe97OfOoICSH230T7cPw2ki0n2j7ngVtz5gRbAiA8oAw01LoqaouEMby6cIEw6O/ySY285Gzkmo6Pt7AIxQ=="}]},"_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-top-app-bar_0.20.0-canary.dc93d04c.0_1605737986437_0.3673823249308543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/top-app-bar":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.99cfb6bd5.0","@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-h4hV9LDaOn4+B+ghBqiAVqHmfn+3VvjNMfLdoXH/vwcORRCgbCkuikOF3dmLDrCqsIP5GT5RkvMxjhWFo4CGFA==","shasum":"f12d0b7834a13f4a6bf59867d8967deb18a38cee","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldWCRA9TVsSAnZWagAAMbUP+QG8EvJt+MME7ea7ctvn\n9uxAkozkeo3BxBVhjC7Qd8FSigxQnF5EQ5LIWkYfn4Nxkpipbu91uO62w2k2\nOt3vkz0Cq+IYVbIwi/m9P6CW/QBOIZ0xChNK/q+9rmnsdp1AXQFmG8h2dT4e\nYW/pQ2Dxd/YxWvL6VfsuSJbqxBVjr537jKA+47cY9qBWb+pSFFcTHxnj6rVX\nA5mcLu/ozYuT87c+DOhYNnX1VD2TSu4aneCXO5hgKk/L79laGErKV+i0Cifs\niPXV5c6lm5Ag3/1VYz053HVQiAFMvpndZFL7X3t4fqElllU7+bj2muBebMhV\nx+k5QhkJOAkLnSp8jvtEPTilMqO/1f9/xEZrbg3ZDk4mDrvH3XoLFFnsojSe\nwiwYFbEMx9MZjE+7IigpARz8taSZbxL/kMUtV5IAo7X5kLkXUqQwYRg1zq9f\nHLPARi9eIa3volRIcM7qvCiF2ZN0AGBTdZDgrxv7djkZl8J2vFVIJIbiA+uf\nzIoKeDeJU1AtZHXUbfGmL+3robTB4ttGg1yUsOJzoV8hczgQKGEI1dwaE78S\nkDT0OAWFS6dTuP5i9inNmG9bnKbf34gif0g1Z/zdkgs772tPj0Nw+DBz9Lq/\nUERR87VksZpBqkoP/J0ZOKwHjWCyP2V4OYA+UFAWR2cHH2mvbnlpjzotRhxs\nR7Wa\r\n=qhvA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDgmR3lQ6HIA3qSUuGReXrDsQF/8jqjtkB+hXk3Ppto1AiALef3p7r4SnW1MDSJcAxKmVheiqaeSRFwDYmH3VsXgkQ=="}]},"_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-top-app-bar_0.20.0-canary.4a5d4eeb.0_1605785430013_0.94687799814581"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.bd176a15.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/top-app-bar":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.30c11bfc2.0","@material/elevation":"=9.0.0-canary.30c11bfc2.0","@material/theme":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vcyngO957JWCcVUqQtb0PcRTxB7Fb7/ylbRdeRni+tQ8qt2B7KqyUl/6KxiYswQBnNqTLxIbo3W60jMOF2bJ6g==","shasum":"ed2484d84156ee7e8ae534c606787bcb135c659c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.bd176a15.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMNCRA9TVsSAnZWagAAAw8QAI648FJKI9x6rUOYEis1\nLEsssd6BwpSUnT0b1aQhkUViVlC9+WCtJ0XAykVstF+YCZJcxODue3CGW7x5\n5eIPOwIFdHjXfTD4+Jcq2rBlNpo1tLO+ELo8nXMIcixBJbNcm7jrdPioaiSs\nj3gWKen7tOitQ0mmNRMTysvIRa1rhv1Ga1EEZZOkn2tlYJpUjLxvM8m57Xvp\ncwuJwcf+OwkKciGxxeeK1fzxjAcU3eca9nzjMvqskyDhoMn2QXN3bbkE0j0D\nrginz/sw+3ABaUggul/5xbwxe8F3b4FuJiprxG3llaXqF/2B4KTNV2HJ90i3\nOPGUqPYzykkpu/apqwwn/2V8miUzR2E6RAo2lmnhCASxv6rYer4LDzCxAIbR\nZZYzQ4fncdgPdpJ6o1pWBKCdwvxCZfoRMmegsFQ+at/KnYWXqT+vAyHM20fm\nrVvEu/PCeS8HHCDCinsGCD/DOslUJvYKjYf/W44GhI2Ln7WK4kWwWKwKJ+tq\ntcFskmNln9dqsHfFcLBZ2jYIxYBdWlpOyy2J22XjcyUpjUmQhdhOYt/+SZwy\nStItN5oRIPW232cWOjH3+QYxLWzvbeeLbNwbbPyXkz9jZ3fuK9A2tSDN6HpE\nBwDKNSRmGPITiNP/rumquyEKphEexmJcJ9O8aBPu0dOlktM8vQU394vshJxP\np49C\r\n=LTBg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+3gHXAY/OEYmXnaK/mF0B4lBcZCNsCC4FmpVMb/CQDwIgfdjQX3qjj8y6WMx0izIAbywHcpHHCzkRIiOK/Vnif+A="}]},"_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-top-app-bar_0.20.0-canary.bd176a15.0_1605813004687_0.1275826527057431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.e85aa60d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/top-app-bar":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.c927a5d05.0","@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ec9iaEKREc2HVsuMGgC1ywAUHmYZSEGAxQ+GxJLpcu71woJraPOdYsang7fNv2IHN/ZZ9sTqr3bdfGzTJ8HZfA==","shasum":"9cc944599e2eed1b92aa7043d1739f9f94029de8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.e85aa60d.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDafCRA9TVsSAnZWagAAmN8P/0TsJaaeL3XmVXLfGoEc\nkgvl8NOiq2WVSZcDFKHu+K5FyWNazWsTgzl4hjv0KNGd/eAMf+hmPEouUJNu\n9PJbS2JBo0xNVOPOualK44lpiIE2BjZiKwXqdY3XxhZCH9wWv+IE6QX8uIeD\nZWbHdBDzLfum8K82vpKj2fY96Gd4vD883PmcF9+jk6ALGS7+t8ScBw/2p+14\nwRMygeHRhNN8SYiBgmSR6zDqTlwtZXZv47sC3DdeKHGfOmWjjr6MREgPMgwb\nano+vC7++d0MNqZtYzGeLAvXyPpkJ1+XJo4G8HiDItHw55gfFLH1x6UFyOSh\nF67/hlXN2Fp70gZcvNB4zTF4DqteVpGge7xA3vUd7tJX+LCm5iVG9F3kY/Dy\nbRoE97OEaw9/15NvSp+xixRWQennkcifYfc21IJEVNrDVjSno4SKMig7OZco\neg9DN8uUtU+QuMkD4TOTcfFodFhiqpO+2KtZ5s3qddqwBNT0uHXJYq1Qg1dE\nDNrcoDd8fBXjsqtfk+pLz3RMzqG9UbkrfruMco1nNHvD87c5QM/LyNeEJ69/\newRVa5v2FuDEVNaisIwrGFoa6w9VPoK2D+mhjrVyxNmDfky6EnX/9JrRs9uq\nTTSSV0gKxVP8jo3uIYHUVtCAnjPl87KQZ1FQYeURLWvs4PrRYE4FEX/r9MOl\n+m7M\r\n=hVhy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpjCb5F7nyxJ1LGc2VoanbqoZV0U09HIJAFaNbw6WIVAiA+N6UfvMWQKMSP4WX7hfPaKrBnivdiSyAqCK6DumCBng=="}]},"_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-top-app-bar_0.20.0-canary.e85aa60d.0_1606170271403_0.279159804329437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.72092360.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.72092360.0","@material/top-app-bar":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.c927a5d05.0","@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7yDuo7Ww5qwtZwU2/Pn6u2r0lVrggyXINyU3bnEtbNQcDqFkMw5j5gHq3FBDS1jM+FHM5T+0zVrH8FqQb8pL1g==","shasum":"98b0195c763b32b9b1bf714c7e6eafce057903a5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.72092360.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvIl6CRA9TVsSAnZWagAAxJQP/ilrW6SJnCpKLeEQkETg\n+BnBWVrJWd7J/+qbgIlxP605fBg85aVexXjlqboHFn6UGAz8TLAk8WKhlEFl\nBJhjtZOOe2JByk8JOYgHfbyzWU5UBd5NCahrFF17JdqY67cXVsyP9vxCp1Yi\n4lehjhgEIPNsXDnTAdmaaY5hlfWcU4MGCgNJi1GRjYdCt9f1yYmiUluSbNhW\n6sV7mx7jagDCZhcVqSq4LsZt8RYwBB6mjtujb/AsXSYUokeC7X14v3YqrZ5/\nu6/qTG+QDMSb82mcY6DXfOMrWXMYYng/fijKTCspGTbVNBWj/moM324nvIrn\nItRr9nzm+a+aGG7dNtT0bOliwILPwmxKd2DlFVF+JF9x5tHVkErJoC1Vfeq3\n0Su5MYTILDVuAM93ACP1p5XyL3hqUAlPLOhu09/62MiYcg/M0SBIvEqd8wRr\n/A/BZlEF0rQsfDG+xRYkqVOtLW2LbM3dnGqHINCbHArCKID5yHSEJ8ziXqAM\nXKff6kCTgC32bdK5yiiEUz5/fUml5RYvQB5DGlBMQszBugu7Xepey7udoQQx\nG2wvLdIbhSSZtCdfbVwUOGaZPQH9Q+gy3NGB6MAFBFGmzlJpiMS8arSB7lCq\nD0puwdZbAnUcZy/uzlwGm7QBAadkr7PedM6etmATC05DdSsb1k5UKQlNKyQf\nzU+4\r\n=4X6a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHeG8K6KCBzKCYUArx1+zulHnVNGAY4a4vUeUcEmEUz9AiEAuGTFOZL7j/IOmSh1As2Wjw0yaYkDMBeEJwsxtv4NjC4="}]},"_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-top-app-bar_0.20.0-canary.72092360.0_1606191481918_0.9393585493454768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.baf9d39f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/top-app-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DXYTSEqErySechoDVZofv8cS/B/F/6RlQNu2KBw5OPpEcPi/gRhBaugiDU+T19NxfQf3H2A5v5c8mKh3oSWdCQ==","shasum":"38c3aaf4c58059ad51e16ffc0a63e0db05192d3d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.baf9d39f.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEeCRA9TVsSAnZWagAA8nkP/08PICqvOhlUs0E6agts\ncnlRmUM1WCwgugDFK3VqUSgo2qoP+HOG6dQckeuA/PiGXF/IvUi/w7cuqXF6\njKcNY2uR43svo0g4oJNkZ6Zykj4Z+IGyB4AAOsWSpU2Ynk1BH0SJA1t7a/Tj\ntWchSm5hch7cGmRZ/tn26j5qH/I+yBXScGAgI74yZxzYfvfBvdX07u4udmmE\nG1YhTTYqeyQF3rSROUVxjmoJlEiZBQgimbGSoWe8/1d5raNt7R6Y3DkTj7E5\nw6IPsZ6jkq4GJ11rYawWKzsgR8c2OO952qAgtQ7mlJDXZqXxnJplyLmCcx2g\nV7xuZJVMLwE2gGG3wNzeLyVHpfSyGsJogbQ4IXUEgXDITOtwOcSU+/b9Trf7\nmavvdjx9PTaNMmk2SOeSaaPnlzKGxiEZp7jKL7W/0eBr3eHsHOMbNgtPGJTP\n7s8+0MiSm0sAYnXs+dMA6iIvi2GDjB8quz9NP1iCXOHv5mE3ESD/g+XEGVts\nJ8pgvUcR/OZfYa2zm93NIWU/Y6RL0QUVoqQLi9xuedG2tWPobsKpasJN438I\nbVogeBSdi4V8Dh/5cdpq1oG5jri35NqdQnqfEx+YfHK9GL0OC7ueMYi/Qc0P\nrVltdRvY+Ky3udTIWoUaSEOulkdgiS6A9dHlOtwOWkr9om2kQ5AhYOfNGvPf\nBzwV\r\n=W7rD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtAQpzfzGqyvD1lVrW/VVZz2Vo05pctOVrKwTqx8Y/EAiBNmgp7tydJPl5h+TQqWHAr5wws8RYGaE6Ifv1/oB0hMg=="}]},"_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-top-app-bar_0.20.0-canary.baf9d39f.0_1606340894333_0.2928919230052274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.51aab0ad.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/top-app-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rvaOp6GcmrKGuuypId9WpqI7nvJh1akjs2mi3Uu7Pw4ezSz7NmpX8uaJHBjJzbPobwXaOt7ZNmV9kCLRBh8zzQ==","shasum":"22d3912171f4f0dc5ed3c51c41e3c5a93235c0a5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.51aab0ad.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbDCRA9TVsSAnZWagAAht4QAJOqNEKwOJRASPyS3eRw\nLW5U1Xy4eZaTYQcjaBBCU/oKafUqi9gJY0TiHqRWVQftUC8AVO15ITPSXwaj\n2cAJDis8HfKHm5Mi0IwKb0V49za2sv2bbn7n84vBxmB6DK06Dwmhu2L77Nwm\njW2vDC9P5RYjab7laUYzpz765F9Tt8by08MmLDR/P4UlCFW5Rpgw1NMhzxzB\nUYoSHkKq7G4Uz64OM3jCKVkdhxjgo/z452wJtFAfpPtrLQOpa40OWCzBr1+o\n5f4aVBriKFikEgyhUALrF1gIqv702ggovahYfkpbnqvmpEk1hn/KuS4T5CJw\nZZaUdHMLWjDsyvdn59Y7WP78JhIxDYCvFyJ6VBwHoW+8g6vkaNX3rfAgZCvg\nPL9yI4PxAWaaf1oWa9R4pwGyWWWfPn0rJ48rBIup1VAdcJbMJgb+D6tS17NV\nU0GkxR4GqLbVpVqOPfXcNRxUz4ae4Ja7rlf6LWIUWjXplUnBzFeesIs2f2/y\nUMP+HY9x/FG3e7o9K5xJ1+Gr3KRpbFySPfPJkPAC8lu2b+Wt1eOAwV/H2N0H\nLU1OV/0VUi8ZOIo+L8I7wVwIYdj+tUn38CM/HeRFIXz0gp1mQdN7YOU1Vhxl\nRQ+yYfYZzrynUGXtoyKfEIWYIv3kQDPTJNl3qZ+tSvRd5WvcdABMB3T2eZU1\noqzu\r\n=2J6b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHoyjDn+Aqu7hXwGhBJ/eSCIvCCI/1Nt8o79JjjLb+I/AiBpDKAzczAUIrbKavo9XOGzHSyV7eYxFz3CBA8WPsj5wg=="}]},"_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-top-app-bar_0.20.0-canary.51aab0ad.0_1606784707287_0.37554544869009643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/top-app-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zuJdcvOzhKNc/6IC2Oe1elmeTR06XLGyvhDlJ70XhpAPknX9yykxP1IiZTIwVpQ/pGqZO6AjOt6EYgDdA9jrZQ==","shasum":"e6a5d1d3a973024e3438baf334f11621ae6c4448","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.8fd4af5b.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDYCRA9TVsSAnZWagAAMLMP/0rVfQ+VKGMvuTOAlYbT\nazatAv4eO4Uxi7b23F1F40NjK0IdsAPmOQqkKvHDVK4fGlQe5CAfevZoCvwS\nBqptMWhBNNgFc2iEIaQFrdyKbfx7Dd3A9o6FPaCismZQgzR/klu/rWWfBUek\n+dVs1uWue+eE56y3EKSGVSeJPY3mK9jcvWG1jprhDa2UwVfyTwwO9lcF99Tm\nIXgrcJoF+sRVcK6oenH62B3VVpXsC/xIOXXkY+kB3pQXoim9mQ80AHv4kA1A\nk+Nzn9FhYYSEZDjHy69eQdaT68YYYVg2Tkuq8f4sdmNQLoKr4yryeZT6gXxF\nHx4E19FYm1anXMvnxWWV/f0wXoT4QIZz4+f3qEkEx2At9pwOVqei+2JRsZCc\nvS5ON6NaD5hZp5cZqA0852k4dnjsm7PZHeorO9RIX9jXmX1XBd3JZyuYL4/+\nVcmCs/YZl3J34ATt0PMbS4ACeTke4DBY9a8IwxfhPUwcAY50E8LeGc5bIKrl\n7lAzaw76Lx/u/NKHVxxnL0Q9MHRSMenUdRBl7+Q/6A2B2lAsDvbVbJUxHWWi\nT4cnt3S8LlAph6t+DhcqXICCSVVuhhgu8o/BesY5Q3vk5kGw/Pqr8DTeoNme\nZYKB8gEpQQrDaSjz3hHX3d7H601zHOzPkWeTmxMEEcKhw7SiNLC0Wq+uppHB\nvU8G\r\n=4jvf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+Pnv9V0HeBjdGDxn0d0wNw4eHNaTk4xWbvZIrJ1ogSwIgXCx65Wf3Mv2bbk/hhbpp0L+TcGgZJQTBQqG/vsG1eAw="}]},"_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-top-app-bar_0.20.0-canary.8fd4af5b.0_1606955223684_0.3499142664344481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.26d14d2f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/top-app-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-5LoqOV96RJM8e3QIsik5Yk87FbFMLCjamBsFV6KNbabwKrksX3EvAq5u+vXHLxxL9TxEI9vfJ3uBPxlm2YRQLA==","shasum":"632ccbe0b3e7b46478d4e5141cdcf9e94ed11585","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.26d14d2f.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDePCRA9TVsSAnZWagAAbioP+gMNmFsiBlz/A8UBoms/\n+c6scb/CnCN+ol0Smiwqh3ugUxgxbUkwyox/K6B8pTNI/Fw8GeGpguEXBlE1\nvUb76XJEmrVI8nIsCDF+NQ3YZgWMGqh/kGFxzdYa4V5MDT9MAIF5lSlocRwN\nrUw3vgUcndwtHpaAhARk7oooNoAQfBjRFs+E/YIBGw1iu00X9u7k3Xd8ZOsH\n/ndvyVT1o3LSyAdf5hcvBdyT44jdPy4cj551PkCEOb8ykNVGSYoK94dla5vs\n1NID+cdgArT5YuZKQ/5aTFapVIlBNcxKvtDi2xNznhBQ1+UOZL9huxGZ2hIt\nb5Pzcqa9EU4Cguo3gvLEdZYTvfRFb478suUFHjnNHjZcYLQnZeu+eiaZ82bv\nYbAKbf55RJbcCObSgiJ+ND5DPxo5MqLfOqtFx+jly+oAO4rNrgx4Dp+I0tLP\nSwrcQ2koUp85caz6oQ1vuXiItgqKVDuzKXmuxmwGfFWTEIC1DxS5iBdJh68g\nW9Tf7gqjEtgPwgwifF8QJ1Wz4JFCqbfb5Hf1PJqMSbbSC3hLK6grZG62X19x\nNWtCwmLYQA7Qdb9VAgZB48yNNAcSNrDy3dP4jEGGn6oiN/jKpgfYHVtxlXt4\nXRMqOv//x/Opb54k+kcxqAPef+uBaxvvKAvfnWUD9lKcaO56L6f9LRuiCY7c\n8Hp3\r\n=+ecd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADj2s7BkWa4QIP2Xx51vmr4ZoliZ3zrJAj5lsgwmyYEAiB3B1OofadWNJ2rIdxsr3XW3pfrFWm78cRIjIVhmhuasw=="}]},"_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-top-app-bar_0.20.0-canary.26d14d2f.0_1606956943326_0.8744197684331363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.1663d7e4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/top-app-bar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.11da3c0db.0","@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8FCgpsxWrwSgLByj0nCrxfyDFLzQYHOjz4ow0ADJnc0Ik14lxMbQwOLnBqWI/B2VfwnQEWyXu2J/UeTLw+eObg==","shasum":"732cae5913ffbd9dcd5bac95e454bdbee80bc4c6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.1663d7e4.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxiCRA9TVsSAnZWagAAYgwQAIIU7RbQBVkm+HCPIpnl\nzPgE3+CznZyVqw0dk4j/YkF6M2LcvdMvSXBLHiVswdpGn+diBW2tVPgI8EZS\nz/WBEt82PY+CmsErVSxHrTam1uRu2DZSGBYMuQK7h1yX4viHKv5LCCfxarM9\nq5f8I4Cy3o3+xJRmXX7UeyDrLSh2nn1QObtAV09ElJEBihSlV3XkrG/BA7Ky\ngMDC4ei/0GJjx5EJX3BaqL5QvCe2Nk8WFjztlkqbY0QmBnwDMkW6TpX1tUy0\nLD/5fGWr26LnJ8qA0dQq4SYNmXtEVDXw2CHwdg/Hh+tFYM6m3/x9+cgrqz5B\nPdv7yIKuhn7D/oUf1tlIoRmb4mNtuWP+bGIrJOqil0/c+zQUFyAn9xrXJMDJ\nKapjhc1mQ+IRlUw4mSv/TNxvC0ZePbLYAM3sen+gvEcVWOXwz4iLKCuv/VVr\nklYPHTiDte5LsQUOswbkOokBKw8OGCju/EjVeNYen3eJpzZN1dVneUNkjmNC\nuCAVmF5fEXLvw9En3ZjECprF54r3UXMgVH9L1DkNc5Jo9HSE8SNQyqxcRaAI\n+PLGki05KPZXob37gjiUpwY31czDe2twNlswc/v6eyF4GqJx9SrX+18YkW74\nJ6z5GUzUHZGmbu/LYBYYNpO9vfQNdi+8Iwv76GqKmjVqmRMXHtCtHj7Zss+b\n+tJG\r\n=favg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzc0VaNtVjdJA+XFB95w5nvZJ4gaxrqwoS4Um07bFRVgIgd4aK3Axj587dR2rjaswrMz7jCpwU8x9c0swamwSuFnU="}]},"_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-top-app-bar_0.20.0-canary.1663d7e4.0_1606958177817_0.14549866683530066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/top-app-bar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.11da3c0db.0","@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-53I+CKoIyGsDMHQ2fUrXhZSuGRd7+PNWgK6pZonR0ntjxIdmOW21J2pqE2lqmssWNSGeJVT8H8QV5fzRwph5aQ==","shasum":"67d1180bece778ae481eb488139a82b8fa203c8b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.cbe9fc12.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdVCRA9TVsSAnZWagAA490P/1On+HZFnuapeLE6WCDX\nNRtp5VSflWbA9RbnFjTmgzS3/7mnGP1vjVqhIJ6lqJ4fKHF3RzFcJjpTOzNN\nof9wRjkFPdtfP0Sv9xH1M590sp9kzYvFLamsZ+n+cnGVUaOfkPrIgdHynVio\n1DaQzA727CmvaWE6v5dHyS8QOFmyWWTYBUSfr0DFP4aF4IlYZQGHZggEdPb7\nC0J0cWjk+h+V0QeG/+G67GHhgNl9DAzw4PB/2Flh6ZsLJXCsT8aKQTHZ6ZRk\nIDOBLprieO9AUVjl99rg+Vz6Epllf9IDfK1eoV28A/3aRQhYWvmNRirfO1hq\nPIT2V1lcLCNBoR2hiaOTWNraNIB2Y3iAdmaL1nPFmUdSEGQuDVr128R211eD\nmyO9m2vxJc2zIA3v3Pm3QI/ABzSwud/BqVtqsuXQE00nuvzvhPdFGSrvILWW\ngIJPdkpUUmf1/D4x8Sdz7mZdsEKEwGuRZ+T3R97w1zksWMPSAMSJ4Yy91P9u\nftfDrojvR+7JjAd2oHafZ0cZ3Ty1H5Ln56UU/FPjm2I3np0MrilKtFXFeG21\naC3PxES9AeJOfQmCoEtjX5mVxmm5IE/gVohj/sshGjIXz8utzwvC40PCtpeU\nTDXzvxMBvOWAESNUYZbC/KG/tcKzzHkmbVTMEftLEMiGk7/mAP0Zgswe2VJg\nSmWA\r\n=dd7n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvKUde+BgZE2wbonYI1YMhAYjXwVl4kf8sTANzVBZbKAiBldp4aL6xFbdw+nn+zv5ah7lAXEo5btwdFoWUu+MIsag=="}]},"_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-top-app-bar_0.20.0-canary.cbe9fc12.0_1607022421400_0.11059619347944927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.9755be10.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9755be10.0","@material/top-app-bar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.11da3c0db.0","@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KvHg6MNEITCJ2DCC8iN299rYxpfWEP/EslQ0b8H9+dPDy0a16xxXtT+gktr6q6LsQQR7z0i25EsiG49bRVBVog==","shasum":"096186300ca9e1692db56f3b0470b6244375ec12","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.9755be10.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuVCRA9TVsSAnZWagAAEZQP/0ks8biNmvmMt2Mq3451\nva48vK4DPX5PE0b0ZLtO+3UedRL1c/++waG3PV1KlTgz+bGoc2HE5Ab/xOjW\n4a3RgsgiIpX75sQG/SDy4AOZYrGYcX5oQrz61HjaGTMjjZBwhYFN1S5Ag3gZ\notH2jcpaEXid+w6gLhJhQ+TzcXq00vd/Wkk8hq55nTPNRkXpooI23Byy6Hyc\nSnxj3f2fz0reA83RSRs0exX9DpPKpG9qSKDQRuSOW4viXEozZQ7+rP9PP5+e\n9sZVV6JAv8cBiP8tgegPf19PPQVd1TvWCcEo81bs9rD3cDV5niPajI2ftnGn\nxjIcIllsOTWsIdWI72DHRPVwprL08WJMKDoRa845SKZmHy2L3oeZ61Z0ANle\nixQ7BcermOvXrER86k92L7VOa+j9SC7/AuDUhwAGvQmmyW3i3Dz5kRqO+CJA\nlNFvG2MmHG7fTOEiyhd2prk3743MK/FrBYtfG0IUG2+LCA79d06BZ+IsTHwE\nCGFbQ8LqZT/MOPhxgJmjy0OZdYEhPepXHvH14I9aJR71WPQaa86jNTE4JdhV\nNCqyr+ixCLVqDijKwig6JJIUHP3wK//tvXBLoTaTcCo6DgN7+J3YPBZq2yGh\n+s+ZrgVrGKmQGQBaVPTVRADWl31wR1xT0MqQgItlqC/p/Ul9qPoGb1ODH9nI\nKteV\r\n=k0W3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6klr+86PB/Kft8Bb2yK42nrIVdbxC68LZ+5tXOlT9owIhANvZTOWRLIMywXODjOq9N1Gchz6sijDIJgwzQR+/SjR7"}]},"_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-top-app-bar_0.20.0-canary.9755be10.0_1607023508645_0.07813459539167567"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0-canary.3f64270c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/top-app-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YsF5CNhpyI+PAplUJ8ScLE/WzfixHWKKTOfKRcIBTHkptH+CSvVbTCH2kKAryKZBLUzloJG/aYoI6JF+n7ifjQ==","shasum":"5f86133ccf6e401005e544b0f0a6d43fcc54e5d7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0-canary.3f64270c.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV1xCRA9TVsSAnZWagAARGAP/jaUaD519M6NftZOH/po\nJUEEIK+EhfSiQ9zqhj4946PwYeH5o8xJLT8r4F49rce3lU1G/MVh3SJyLp5M\n9JBsnjkikgZmZuefv6Wx9RllsNp0QS3CNB7dspNVRJ+GpkUJO9o7D+0+qZm/\nCAcnSBB7ngdhjhhBhIgV3FM4f2kq7/l0WdI8egMCZrPfj4fr4VdIxtEsyU8f\n3Oh1oEpYRkgcEfcZ1ClFq+mZmW8cBVSX8ZYpJ7S9EeDHSGrBOqsCzLhHfhlT\nAwkqQI/kY+FIXVGdY6UJl0+6VExzaSM6rKRuE9P3AqrHgkoWp6YHDsfll/SX\nSXou88E8W37LwA7IPEBsZu43dAtkmbWdiSq2pU9eLJHt3Yqo2Yi41lPfPH+V\nPwnOj8sTgWgoBkmPlWJuRFzmV5eJ9Zt4l4SBQlrjlYRg2rN6M0paNxVk/BZS\nXwaXe7miTHeU7HMVyOe3fXZbprqlAaMYxZndOHl+3N/xHIWPuP6S4Rdx/FrT\nkljB+4R8/blK/9aEBr64SsnWi1M2KMM01QOR9YyE4gY/5TVNg66WrdF+Jy9P\nafrl2oSD1IFkrOmLHdiLwZ3KhrOxoF3CmI3eqEw/XAPJiSYEN7enCcSd+/LP\nC1NkaaDJMOqTwy55rG7NG8q2xTK+4ARtDy96VbKFsIguaykRGnEY6e4bn5o7\naCM3\r\n=gNVm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTZXo+uflBltA+0KTJccezIPOB4NtOs8tLEZehducDdQIgUPSn8aed3PoRfVicrwbL6HpS4eWHyOCqxR2GT1GaHx0="}]},"_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-top-app-bar_0.20.0-canary.3f64270c.0_1607032176811_0.8790180204091358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.d893b14a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/top-app-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7/SR0ZvWUQ3O+k+HpK8dftWDlxdC8BkABGuHizbkKxD4gQo0plgEQcEjeYMq9RgH9cAPqcFk4WAhsZlF9DQong==","shasum":"d471b568a19102bbc317cb3fff427f7a1356c939","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.d893b14a.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWXrCRA9TVsSAnZWagAACFEP/2+VQ69hwf4bEGRDtjY1\nVSImL5soEt3nO5PAlxyj9P5AaYh2m2Ho7udZ7/m0viC3ODL/ARQxujckvIV9\nIohBkByOztUi5fOpOViadf4WsRfaJtSRjDG7P1tBvFw1JyM6W6OUNrfS7nBL\nzy17VvqQMXexa4G+hoBEnxiWVN4Adb5iWu8SlNapTJjxpAVdwhKrGJzTtxNY\n3AkJ/Lc+OK2Njrzvbvi5DpfGcKIQW22Xu4q1zc8YDw2cScJo5ZgyB/dm5Nj2\nUwRgadIFu/knh8HzQhMTSjKxZbW2NEj+MNR2IieQY7SNB3l5axqAbagWKJu5\nuOKXAUOEqV4cuXFYLfADWDJFzZp6TCeGcMyX2nAvsC6367VPTLIm1gMiRsQb\n8KgaImyK4tKXiKrqn4H3k2OW0ELhK+Yo4ntE476KpRjqDKDcPzziZJ3Z+5hg\nEM5UXKxzvQDiI/1kJuLp6FsrlBUYmj/kDf/8/XhiXoX74xVmFQQMKngk4TSc\nDuZiETeNN0NV72ko6J3vLij3W0459oQIA9C9o7bEGhZwHfsz5ntU0epFUKs3\nE9Wq+/UDY+FvbNacv/2qTjS810WflrFhb3goDpzj1HlaZopPQ92opn4H57Qt\nCHU17HbyN4N701CtryXXOkCX8een4SdC3xFkVEVetXcpWkEX89fi86EmjeVX\nlKPC\r\n=fhu/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDREnxMbC2DVkoRs3+ppm7Fg7AaqVJOyci46q0a25DJ1AiEAuhk1GxnhQBMCBiNxkOw7cM0geq9KQ32pX2efMHMfyoA="}]},"_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-top-app-bar_0.21.0-canary.d893b14a.0_1607034347269_0.8348311822340857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-top-app-bar","version":"0.20.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.20.0","@material/top-app-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-EHhiG2mjlQFMdVFeId/9nzOKqqaptnFycxdvojUsEbPQn4CU9h2Wly2THeeAT2DoF/UxV6DE4W/b3rzR3HzNHA==","shasum":"09273a3d06aae7bc974ca471bc1c6fe7fb928789","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.20.0.tgz","fileCount":16,"unpackedSize":66289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWaeCRA9TVsSAnZWagAAaxIP/Ak04JKh9bMnYC4Q0viZ\nY2UO/XdgMLkqufdjwabZwEOW6EbQcYUe421Pha5tJ/4FUDB9yoWMyk1U6acd\nXqO29ZcsUK2sebDDTz2YvZjYMqKz+yhsl4JOAbI5AinOEzyi1jskbmq9Lilw\nSrXWZdvcsNIOohhz/Sc7hgCgiHGmUnZiekll+5NHk/Sft5skR3XAZvUAg2KX\nVXXzaGUTZvvofZbs1N+L/VKetABOvu0D0QmsquPhfd9UPjs/OHkuxiSzJhcd\nNcr+/MSUZiy7gmq1DRrxRhXi2W0rFAi87lXqANP4mwCVAjga11mCgS2gVf9i\njK44CJs/Q3EOBAKsutxzB9RkU+4+kGHX7bXttBu/ftCxv6g47Ns3UUK7NyWE\nTTOOC0JzIgGIwrFCPUHw7ZAUEcdiMKYOQG6gVMChKBFDIK2SlYP+z2503nRT\nNpdJEwx6bvQHBs5c/3ZWrHfbgmyid5mZ4J4WNWIU4JTlS7ypZNP0T0/3knC8\nWwv1iLv7NFCOel/GiImHJYUuDA9ys9kRZ9roNx8WT8MeL2vy/BLbxD8HJJ2K\nylagGWCrdnlK8+OwBI7b71JzAq47PospdGw7dKH81SpD5ZfasaB89ElGtJB7\nL97lTrdYYO4jMXYtZl8eq66o4vUvoSLLoXoq92SNSTeAWq+chNdjVy/FrLZT\n/Ofd\r\n=tciF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuVvnjZZ6KTjxBhZsW0e6qrkOMsor5h7RO5iBUttWkiAiB6kCKzjMy7wkacWXG7NDnHAAKUQRU5qMF6gILuyNriOQ=="}]},"_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-top-app-bar_0.20.0_1607034526541_0.15838682108589341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/top-app-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MKDNHdlzsDmzO5GwTPYRaBGLzIDkWn+G5nKDYxSb/XuEHke5aFtgs5MWt+80V1kKz2PgJzQCt4QgYDAQc8YLnQ==","shasum":"40a0b5a31da64b648a28add6cc90c88d6a4035f2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.47c7d7e5.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf087+CRA9TVsSAnZWagAARUYP/iXTVuhDeCAQMOLYqWhn\nnY8EqWt9Gv3R+OxclhhTowJ+k2SS+cqumFNPYgiry5B8uJevf1HGTwsaSpZ4\nvMOb2ZEA9AaDSOFi/I620RPsW6+cTKvTBM4ImJTK5pQEo53OxqtXo+gQC4bq\nk1KOWQCDTMUwKqa08q+ySJRDg6q7HGlKzi0claK91hgt5xqQoyFUnDNkNHC/\nM7nzgZd2DvZkXgMxqVC83JeMNCuALGtAilnUd8E+QboQIfurK8BY+VgOR7xV\n7goLIWXCZQw3NaYUiHSIoglU3V1pVUfGh1y3j3KX3YMz1PASAnIweCqLGzk0\nj0n7cJJQ4uJKiiZXoh0sOu2OgxvdtcK17bV0utqWACFLaS2u1vDV8egA0F4E\ndI9Nv20paG1CVkk3eFs/Y/nVOQhd+JczGUjGDDKYuZIt+uot/H9dcCQmzNUB\nx5PyXdAxT3ZH/pRu7edCcTOjGScr0jbi6SA1Zzf3gt1iJqBUAXWZWvE1aErt\n7poat9TM2hOOTt8YQkW6ku5Qwu2gawREoZFvvg3q36SH6hghlLsLh2U5j2+4\nzKcQ09JfVAhGJBjA+363NdLH1vyNFBwNCnrsEW0F9Tpdz9pAVgwIdDB7ZQ0R\n1mS9JHCXvqmytsj8+oq6tsUKvVMo8GZayXnZNmCxZn7icHRY7TJQrVB0j22k\nShis\r\n=TpdF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1x1HAZM9A0Zy/q+SSUtNUoC8fFqFKSiCbhW4QCuM8ZAiB1RSDRePpwv53TDV00tVkUOuCRKIjca0okPocgwhRLcQ=="}]},"_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-top-app-bar_0.21.0-canary.47c7d7e5.0_1607716605895_0.7827167009383031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.b304a78b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/top-app-bar":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.9244508bd.0","@material/elevation":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8Xg33BkAPJwbxHLNP2a63B0KB1S9J/Rw+vrg/aCY3cGffm6VM0T2DiTnyFLKWOm6i+M5o+XDDmtwVHioUWhpCw==","shasum":"5c9dc96f5363dd9ab7ee8979d2a604867d3595b0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.b304a78b.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RahCRA9TVsSAnZWagAAoNUP/27gfBNer9A+yDlHWi2l\nduLsULelN7xSVlKzqqP6QPLvt4fJft5MfLkS+JOueyBxoaeQpE5S8Z3kFm5O\n21EO861YvQMYWGT+NjaUlCggYavULOS6ZanZwDh/ZR+NUfcXDIqOWg0RRb5a\n5OVMl6h2g4JKbOFVQE2czog7xSxyg27WDlXMGCSF6TOxMrcg2ODROBxmx6br\ngAO/TqSx0wXyB3HXBX4iYPVNgBUOeOuYrlQR5qPq7fu9uiHAZHL6GhcEF5aW\nzY/uhS7Hf8c8qoZKRH4YYF09eLIiRFZjhjqhx1HgX0w1VgpE/8NrnGA2oEzF\nYp5PwwqJAP/pKdGnuaEeIXbeiCqKBJtgJaO3Lgx7ebn8NQ08q6o1f8zG6Dvd\nCyaOrKha9XiMGMkE3ET/1Xmc9bngginn4c576wD8kNvC28j9+oGxIX0bVmeJ\n6G9WyCceerk6819M1+itzbTv7McYDPCMohKK9y6WtpDhzg3vagHeKQf6o6Bs\nhJC1VsIBNshQRUd2hW4RJyub2yX/URnNA/J6N5KDrvzuA5G8QHRpJpdv07aZ\n3f6YxEf21sJhMt2e9+c0i02C+B3gbbZZgn8AVEQDw/QxIUJczsEMxUGtva3X\nTeB/obPyCKHuh6qbRgzM6WvK8RuYQwJ/Va/0zCdMVRW0eec6KUptJm2onwNW\nmW/j\r\n=QUPJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEB4aVg5O0kolhO/ZcU7lEfgImeo/548KrK/Bk9CelTMAiBX3urwiXiTeSp+zugiDZ8qzHVQqspZiXG7Uc+MmGpGFw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.b304a78b.0_1608062624953_0.06002951085314767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.777c5fa4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/top-app-bar":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.9244508bd.0","@material/elevation":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FavD2AM4tPj2jNejirhzLgxmHddRqOdEBBtDm5JhfQn7MFwG3KrYRgZQdo1XN0QqHidcvq6HIjBJxONYXv/QLQ==","shasum":"44fe72415159b0cd16f547ac662e2159e4b88a65","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.777c5fa4.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oHvCRA9TVsSAnZWagAAqgwP/1MppkVZyiQ8QgVzAExD\nKbGDDbBa4T45XA7GWvBPkFVoVey94u0WJFjNDt4rI5gVmiFvn8yiL8KObRP6\nGlhfn55lh0iJ1qZtawiCiCsYaMYUj+8rGR/GhnLFfx/LJRzxbQtjsS7BuGXS\nhtsvp0XM8UkWctpRDgzAOA7PbDGPUprX+20+vXuaXq3CcpAX+LPmK2LndHVy\nEZ2LytTCUZIZGLP53b5wr6q+olZfwgER1erRCp3XNRLALVKIasvv8s/rQ1Jq\nc3238wG1S7rVvxDz/YHOD9IV2jCtbcVKuGPBhvNR6SqDBFlaEt+ZUpgGNhZB\nHZlRJSTPfYWpTByg46n9Az7BRbpHME0ULz37jgxywmZHitVFlpM0D2WOvLRi\nkfIDprJlJFDU7uc6TdOeclepcYHvQAkjb8+gc9GCGOg8VLQrT8O6i8HikLwH\nQiOSkZYjcgbPvNvI3FNW+od+xhHgjtzKbUnttx1b8hpBAEcNNwcXYZarvBxj\nWZjrRYRXJ6T9+HvmNrqBzUmbKjkQc9vMUNprBWCbOKLiUHvVkkSgtOSBHbmc\nsnrwr3EQSmC+VfxMF+W0Ygh6gK4B8C26jEvELRLBBFWmA3CUiDO4FVKgbaND\nBvGx818TtfrgEMQemm2gjAdS8v0d0/Y5DCBh7im24QMlKtZMftYg2MCOuTkW\n12Um\r\n=H9kE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5/cnc0c42Iv/l2U3c+PolCZqwitH5DyhvrVieimnl2AiEAndPp1T3wD8a89CqirJXYRIH5iVZ2tFnYU0Unlt4kTEI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.777c5fa4.0_1608155631186_0.6253660079726595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.635c7996.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.635c7996.0","@material/top-app-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/9UdtaV+R0/ClmXLqk1DALyjUQkciIGnbGCD8+ilv3pPIuvH8oHZEHmX6Y7wHlD+ZsmboTJBw+/JftsWfVR18w==","shasum":"fa20a6c11acded5fc5ac335d37114f548aaf2008","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.635c7996.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+pbCRA9TVsSAnZWagAAP0UP/2jt+IXdygAXpekGImuL\nKNgP5/lNrN4Vy880Gk/IagLBBMuGbpb5pngJaSJlpWHqlVdJWH4Zs3twNBYS\nEXATNwpOIA8gx5b5tPEypEzSrHK/5pSohn3WTXb2NPIPGNVjNcxCVpmbLdTF\nWOSKdzsUp1i+WUGIbeqCgs7bAagBsQOOod1iCuW6MViq+at9lQr/uuWCM3H4\nSenXySlti5y5o2r8WhapW3WOHGhVsSkJuxfpOvpb9nteZbC/ETJVrJWzPppn\nd+nXpnljq9NhYd9Yt0WW4zAqz01HY9oMWJC2gL8FNWJ/gm18V/QBrcpZTbRv\nW6KLJ1QjPuBSSOXjsgTDpEnRK+cdMmspvHgCeDnvXq4DXjm+0HvZxeUDJ5CW\ndD+RzKIEci7pxuSUYuiiF9/R0shNYcnqkWUtS94GHESx/U489+ND2TQCQHYQ\ndIls+/1dkZDC9XxnS8kkLBOSJA2Z8bphRxk7YQgQSWCUKiCBhlAJdd6iJF+t\n8WoxmMIKjzC6SKmrFbGb1lZyx8z65ftA3fDad3Bnpub4Jmybl4rj8BHtx2lc\nnpZRP+pJwP0dwKe8JPlyOBBjcQ7zYhQfZbtJml0sdSt9fKkDyATwFpVKI0xt\nYvsJkDqzzzPAycKdAyWIfBvyXXzzoKkpj87F+zp0dCUmhxi7YP9pcjmAprL4\n7Gbx\r\n=uq2r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEPoourffsrTZdNSV+ZCpc6vvV3kfKAfQC2bLwFbFxhdAiEA65abLWEIDaR/HkKVJXII/xtE11nYyFrXx7kHDX8XFd8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.635c7996.0_1608247898589_0.3226626014594183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.20b0045f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/top-app-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-y7MSe7UN45wmbO8uJyl4/ZqZOddRip9ahupCiYlbl3bxdyn35SUJve3ddk0ik49Ogl0FwDGpuMtI5uxmqSpkYg==","shasum":"baee9e96c7ecb0f07f3979cec6496a5d3e47e38d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.20b0045f.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+5XCRA9TVsSAnZWagAA1U4QAIyyjPGuUGvmxpoXOO32\nvb4kYthMbazhaSoanVdLDJAY8DD+jM69rSFI0pjLFjs0uewnmRAz9t2Kv6uP\nvt4NacfbvG7f3Xpgz2CEZdM6Q63mP+5nqUy2RZHC3dkIF1s54gGhal3gSpA3\nzZRRzPXHIxkGirFEPhWm3kto/3LnHtzUcNQLjRmiXiw0uTJX4nixLfc2cgrx\nz6438dQWpsRQuobqWGNSdCTENl3d89Nd1T1CKiFjHP+srOnMRvO2CvIGi650\nb2ePVbkgJ9GSpAber4tOAls8EP3ZaOCCFabhSoK1nx7LF7cBwoBYs4kMi8UB\npZ4FC4neWrQUUCitJPUF/9Vy1gWLttkueVhw9QzWlLs2xJiiO6umZuOuG/ze\nWkTygLOQmRTUWzTY8QmqTF6kqAZQ+EZFUN4ElRjTkYcGS/Y1yk5eLayw/6f8\n2dUW8TaAP1TwtwnUcRCrB47lSSmHB5y73gVle2/v6ifoP4mz9TCGgZLMUsIH\nSPhx1CPVjiVKY0OV6kQBtugd7mSNVyb/VvWYtcUQmb4r2m5oKZ2Tq+iz/bXN\nNSnYAk3p0R+TaX3DP6H8bgFOZe2eKtUxWozON/GaiXU85Kwk1/MJIBLcWPxR\nqKtWV8dssFCEnCBiYN8UY3kl86MhOtkgLrMyAGZMc9HglfCJunXKNNnrfktl\nlTnA\r\n=txnv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDuLbXzXhYxg3PJfLvmZDOm6GtwimoEXRaiwbIGYrjZnAiEAgCFFjJpi4KiAe56HijYSY2RiNPZHQb4fMaB+SzU/R+o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.20b0045f.0_1608248919136_0.2894953166056069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.41f77000.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.41f77000.0","@material/top-app-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-irjXceIRf8irCWOe50XmpnwQ5Zl7Wevdg6bjs8/lcvuRChCknRebAL1Gya1hHFVaM6L/AX/1HevTkmL1pF8kwA==","shasum":"c763a877b2829a66042c6cb0fab2ac845a3ccd35","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.41f77000.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/kzCRA9TVsSAnZWagAAdLsQAJaAaMVoV+2b6nlwd6CT\nS+zKr+UPz2AhjjtPyiqAGZVucN2P9i4hIc9fYm0Ilr8qKhCo8tWb06vOy3D/\nCrI3qWzDtfhPIA6k0FibRf0rX0zUSNnlOhkgqKzfA3rFKd6e8cyFU0zbyIOJ\n4RliweLRHC1RJE4enRHybQCOQs9r9o1bDyhZvnnO+bjkh0FI8+JfOXIO8n7r\nrHctEAzwo/9YeJMFkfmcBBVAQgX2/4i6PQ7zs2Vcg9tMjX4tfOUlD0mXAPXQ\nsIynaatrlDR5yFf3HAUSNpHHm0RMTJ4fbU9mP3fwPPMqlKck/mBQDG2c1XgK\ndcYLtsflsNmC5Oe/VueGmpAOYwlJCxlHoaUmyuESz0xb7qpU3SVGLKK7VccC\nfmOtxN2zFbAuV5I/ZvLD/VC4qi5OpeE1TLUbW6Oc1eXhikHSGH67ixSNDKBl\nNZlTYghjVs+Iuoz/l3NwWttYFVZedSN75szlZoQbOh4MipwkytL7NO17nydN\nlG4Pa9FDXbBDLPBZj1Q0wYYJG/LH7vaKsy70l8CzONbZ1qfUsmlOJ2e+CBbG\n6XXGe2SvbB3wXFjtsZBI7nNRCMC/KJ3JGHSVaB7vTAeC6f6epDce8uESJH0J\nT1CS3HQQBiYIcLTrNsV9LbvKOxRf6V4TkjAmFXNJZ3gh54LKB47UKZZWv54a\noMSg\r\n=lr1b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCoci+FqJ3ZzJi1E7GPplzxyufLgm9+R+JtuTDp4HB8AiEA82OnSI5G6WrFvyP7vuBbmpLl/yQRnh4PeNbNMC9Qzys="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.41f77000.0_1608251699307_0.9644759885745557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.afe4079a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/top-app-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-nyVX9dOVMdxf1LGo00ThiEm/5WSTsQsF0LCPck43oNyCS9pHTt+s2XZy2SG6DW9YwTpnj9LlPWMlI5o67hOIFA==","shasum":"d1c7598cda4f3663d22f0d2c1cf042cc8999a06b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.afe4079a.0.tgz","fileCount":16,"unpackedSize":66324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9WCRA9TVsSAnZWagAA5AsP/2XcPKTc4crQIjwcRW8/\n0Y5ZwU2FLZ5ADAH+kwGk3wp4OgYdM+5zTfkGxz+2cExubfS8pqW5BNIqMeDK\nRzfNPI3JN5WlpHY+mibrGgSl4YeFWP70TsXWff1B8YL/6Of/C4/2jsHVdGun\nLTG72ysNGT/Dy7seMCUd7yrLw+/Pp90HcgGKFOQFFH0hTOMzUxuPLt/RHx1E\n+ifhcFoMPMdvIYegBuB/6ijlYWlbW2o8Tiz85DpBjDLPnXtJs0g8mbL9Dr2n\n/Q2m5JsD04R7GjIJW51mTYjqz24o3vJa7AhS+e5E9QWgU51aKdJR4zB2yc5w\nJiq270aoI5/YjHoOpB5QW3XfN0Wshi/+J60tNzoBnlfnB/umwUzjz0b/YkH1\no1/Pc0eZSqkp/wBmsHJlFKhhAJxuZoG2NM7BgkLLVsNGqMNU6sAoEQBUPjXZ\nDfFXbkE+2UrkRf34KfKu5fTvB/pEP6eVaxPpKEytJN2w1y9EV4nJMAqNECkI\n8KMGkcLrSpvb4IrhFReOvXH7892htTvLROgs8eyTgDedmF7PPWtYEciQtpXO\nR5Bk18zFV/fiYzgNmXVkBG1BD3/wsH0Q+Df7f4DeLOkhR5iu2EIlPGOh03mh\nuSj77lpL4mV39KgYYpWLsrZFD07AZHr15zZ0WM1knHCYQrynYJl12uhTA/p/\n9igj\r\n=+U5u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGyRpKDIkttLfw72DgEj0f71LNTsV6ut1k88oB/+/jZzAiEAjM/aonRNLckKednj2Mm+gOKPqXgm5z76CyBuwusMvpc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.afe4079a.0_1608658774432_0.41674465875445144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.407ef8f9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/top-app-bar":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.671d72d95.0","@material/elevation":"=10.0.0-canary.671d72d95.0","@material/theme":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kVG/R56aXhIjzXK+U8d3jnA70GHkp/VElni//qExqsKt5zc4zUDC4j6pHja578IUqqggScxRnXeKR5lEKFpwgA==","shasum":"2e26f232f13af4cfb3499c2187d2cf1ea9223c17","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.407ef8f9.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcICRA9TVsSAnZWagAACgIP/2/Abo0uF2mae59OYKK2\n8x9nn/8AFK7H8z20GnClE+JpsPJtCmOJfJT2o8cYSNkDhCsInptiz/AIL2lU\nXzTVKXXYgUcGy9gkKLZ/6eeUi4z0rCpU3xH8Tlc66IMP5kxyCuDAg9dy4A1T\nY8UGtcEawX2rbRggTDAiMGoalouboqW+1zjZ7I/eAXWSBxMl2jCAF8bD1z8m\nQ5zz3fZql9d0UgbNyfQnILPbDISESDAZ5PFM0+TfrnKLOf2W4eUyPNjyPto1\nFPsuCIagw+xyBswAj0odkIZ4+salBkz3UrLhJISUjwOrQwQTOs04KcZJ9+pz\ngED5RsFyrHgygBejUrgbYUjI/cDE89MVPrAsKVMU1toz52p9u8hVl5ZvAF9b\n3H+4XBtAOkPNWlm0T8Ced4Tu/5bkJwqVpemA0dqYTGKA5FqQ5MUtbE28k3nf\nYkp2J8xqU58YRaNJ3LdLx9wijm9k81VH1myqMQLC6y74VLcIMtE46oRE4qaT\n4lRpkhMuDn1CkKYS2Y92DBCurd7BUQE5ugxeIFJMnl4euzZb0tM7PmTaeYL+\nUNP8KV34DV7tpHNHI30fRcMY7V8rALfyNraRpFeSh1+gkKvR1j83Y9pBzM5y\nvxl45IWtlKVPia8EU7ApPgYJzos1mGYJWAiDwqjtH14FG+UkQ21dHDl73GkY\nl2eh\r\n=Aasm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDX2LAmtKre8gCi9AYXtFOOuDEr/6uYfC61VxMP8cr/gIhAI+la0IbupO4F8v693Cj+sbC8JoYsG703tuOA4ntE97m"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.407ef8f9.0_1609369352368_0.8902093529451685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.2e26e137.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/top-app-bar":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.365c69360.0","@material/elevation":"=10.0.0-canary.365c69360.0","@material/theme":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-L9Ien9FKpkdygp71BMBu/CsPmxZKOrSiKOiBWZruSjvHZCVgJsf5n5AwqIq75/WdJqn/pRcQo83QjjeqWlwgQw==","shasum":"7073efe0a902e8409bf9493da6e447f8572a95c6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.2e26e137.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LSzCRA9TVsSAnZWagAA8LsP/0u5ZpRIAiGiuPac3Xak\nXPOVgiFUllt7fo6hiaU5X1rFGFvDb6SwQ1VF6a9LWIi3DBaSiZJ1y/flg4Qq\nZiAhbHrzvUPgHn50XDw/9hdo+96Z9tJVu1gmOeiAr0FGHuZVTX7a9+dnQkfF\nJV3HJvWQedIBQL+r+FinR0a0MldNPv3PGFx0aE0plsaHGPc3VYkveMy3bxZx\nDa9TVlqGN2wZv3HIkjpEa6lyS0Naq2U5oV5pPVSg8AuPtzO+JzxvtOjxyvXR\np30/p0t+JPHbEvzY2APYmlXVGLFbgm+3d+8USOTLQrwOd7hGB9NiIniPePT7\nrdIWvRmTfG7LZCEhX82n3MuxM6xbywwo343fUy4eVzJE74qxx/ORAz/jXogK\nPBWKLr5e0RMZJCIUj1mpKxS4TJSzkvpMNJ3Bl8QDBU2rY/yk+Q2llnigcW9/\n065QL/I24/heDOmIAT4eOS1GsEJB91sEtS6OXdWMHyqFl+LrYO+SYS2qAu/E\n4DoWyUwmGsrfl+eyUnjN9Ebo/2q8uVF0hF5IwzVi/wyKhWYb2Rr1A6jBF7j6\njqyMSpMaASFi2sR5em+ZEsEPsUZ5w7EYMA2L8KxjsegyWKRriiNIuK9yZZ2k\nhicW3oDBhAmPbn5EN1ubFbdU6/KtHaVzExoKehxwj837kc6N5S148hpqKxYt\no98M\r\n=Urs1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0RfzUd25VP0Z6GcKpKm43pOQmwXywJXexWU98vUU5EwIhAJCtCIttyC0SwXh/KaRNmTDnVTzL3mScdy/KczvoLFpF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.2e26e137.0_1609872563507_0.0808024169412822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.9009f6c1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/top-app-bar":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.abdd10065.0","@material/elevation":"=10.0.0-canary.abdd10065.0","@material/theme":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-z3KW5A+685rJyDDM9WKSKD2Ku5t2h/ifsNqOLm4a7P4k1jcZgXj9axKyJ2P13Kk5VKjI3jqWHPqQuHZ9uUG3eQ==","shasum":"6655115fd0882d196285ffc55b105b9e422592d9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.9009f6c1.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhgCRA9TVsSAnZWagAApZMQAIcm6yuPCvpKDg7C7DfW\ndnzvI2Qf+j/vnhD7qa9E3plxh4dly6qYGTEYoqwkGaOIF6N9VBUjDNK1MJ7h\nYUTSINcNqngrHvkgvSmob+yOR5RD0g5kHzgNx19qKV2IfshySVnOpd9uF+ex\nYGCb7xm3xxfDqv2m2zmb6poNodspRVhpP8XRivAfVYgZVUv6hHnMBg6mMUIS\novnWorxNK5/5E7o8o/77lvTeTKWM430Oy3SNZ9L9hKoY7kCKiIqa2OnFeBYt\nXm7O0bdu3KoVIC3tGjbQA9ynDv25v1wR5LFPupRb707OtsXPFioozT8yuaSs\nZ1dPI80Jr/UY84Tw5r8/Hh8kLF9Wt6PFTH1iVEx4s9k6wxg4kOqYIAi0PenT\n7wtbK3V3CpKPdJdvoko8So7Qq6fXIij8g6cBfzqpqouWfRa/WrE2wtOHiWm2\nIlxoIZXG7ETIMy7OmuP4QdARbBtJuY90Lc9JavC9odT6/riIsHh/f77xe2sY\nytKTOqYX6BbnDHdqbECu+fkaCBCrRYvWbqRbZVlRkUhNs6gpXur0p9C6p0AA\nwnn4QK+v7rArxFoFd8Yp4XW67+F+whdtVFFOheWlLujGGIcGrdmxfV07j+cx\nWMeeVH2y9QHmRwn7bdSx8GJBDo+Yko3JLXM3XPL3JZcOBXRt+7miyjJ68MKB\njArX\r\n=7gRV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClGHKx6WJTgFB3xDGSGLFI0L2xYVYIL9pKiB+Q+lrQgAIhAJtfuTbwHC2AXDSnG9a931mqIffzncO5pmOF1qi2InmJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.9009f6c1.0_1610135647993_0.11637050505317825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.ee99b646.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/top-app-bar":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.b8a1a58e4.0","@material/elevation":"=10.0.0-canary.b8a1a58e4.0","@material/theme":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-z6hJP5PPAwVZVSZnoJR1yiqUwmnNjBgxFmYWRhI19ux1N/8Dh/NmxgJ89ACdR4HhsMGob42OrCwNFdNjy+fGBg==","shasum":"f2d7b607411e3a603df404ce65ad5659d627f4e0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.ee99b646.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpNCRA9TVsSAnZWagAAaB0P/0o7vx5b9Ak2Wc5+6l6A\nyMdQUC7E+PIcXuHssDusLGtgQ/uAaxAfAYzxB9OK18SkeQvEz6BXjbgTwU2m\nb0w5vNRBk/NnEw59F06Jy9O+7yKr5XpU/fmR9Hyi9m620gJ8j6kVoXhouaLz\nLLGXNeGKbTUyEV0BNVz3XhAsdkJK4QSd74wHWlq/HDkx8C0+mwm69hLHhYpT\nke/CHQP+UzYXCpCQPmFeSeCpMrjK8l8J3HX92wiKi8Ld2QqpJCbLKT67Efmf\nhdpwExiTYWLd/tESKXRjwmLV8uva7KDoTeB3lH+XsZCQpnHXMUAtprCcpdZV\n7HadCifUUMjnMkW6MePBpFVL9HlLSlBLK/EM+dBsgk7pHPAUTaKiynR0iiAP\n7GUWax6rF5UOqpt9cvtXtm4MPfJnEH6ITVjgymWfANduLBlnYEy6piBAx2iq\nTDd26XcPKaRdzw5NQJnNFl7egPr+6zIDK8Z3rAv2p4BesaNByRMvSkGjzuL4\nbhDW+sY3h3AKsi2V2wCIAGuIiDxWGh1s8VPWkTiW7w8EQNCR0L1vIzv50HlP\nQWZ4VFLktrWlDxW01alJAYqPt1yJjxSngU62seo4wEiApa4yZq5Tut+crHa4\nY/sDNr/M8pQnnBijqoU3e4oBA9PXciZWBzgCUe66+prDyFn/H2skPZ8t+P+q\nb2xP\r\n=rXgt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcrgITU/bbr61BvKcMFabRY6QiQCiWSA9fKkBvPhpLSAiBqQ80RrLcL2k0TIFvRihHRFTqE8HKYj+tggi5uM32cNw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.ee99b646.0_1610406477069_0.0933681200152876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.740ed33b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+VlX13mCOilfoAc6dOX5ttjX9yF5S9rxQWmRV0bwOwFI6ypJlnfqPL+Gu4Q2adoX8a1nLEIWxAGzIl3mScZP6A==","shasum":"a556c8cd779dbc2038e6ec1a5517e468af6ff5d8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.740ed33b.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSNCRA9TVsSAnZWagAAUt0QAKTORtp7fUThNkiDuEsk\no73kmE41BLKqU2NfEg19aYrl1hhAJYeLkfRnyxuUItity0yS80lDp4Lqjr5C\ngkBgQ3vh0bsTarkO3rDQmyeBsGwfVT0a8M4kCLnjvOKcKT7+cvvml94azatS\nvM5FoukKoQxlYlcrBfrDbJoK7qXoXN6KWNON0XHft+FExTRQaYv2j83/ouwT\ndXhYnUZrTKvhQCVp3p6MwXh/DcHDEkLXcutqgRsWF3P+KX/9E9UGUQjQheuX\nWdhi6tT57mUoTnBYOqkId2ZTaJYqAJ8xH4wL286qE9f8Cd9i4iuwLZurapb5\nDLZOHh0+iiBDtEX5/297Q15yq1WFh96isLv1vMlqqsdlAImZ0HSP5Nh8sKV6\nOAY4YIPZWVScoLGjCAKTTd2BK4dkIrESpkcaXn9okee6RpGC6cIhjbGX/qiA\nK7/xBgMJc57SntqMnizwlS5s2veS38OZFeUu6G/VBBHMNWJ7X6XFeHTxuXSF\nCg33n1ihklEMAxSNf0fgcgKTttGRbVw/hS4mXF6YLpqokCCrLQdO+TKXp/uB\n8aZABRk+UyP0RsFrhvFKryNgfq4OAIm+5a1fdiAfV9BRSdN/fZQiwWYkk7NE\nTxs0jsp+SxK1uf8hmchqInYpvlLnKBr5+HkXzO58LCoxrtiy8/dg1OpAGZRp\nR6ze\r\n=WABE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3OMUkBTyweziuMC/DO8hfzAl/BtKMTBIKN8WD8OPlugIge3gb7awhB+OfWTzkyBU1oV10bODQj5XjXseOCl+8kM0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.740ed33b.0_1610474636607_0.3244840538856284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.c5c541b1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9T9IusA9NXeOHdsMw+2DWKjijaFplSk0uqyV1g6F3QTnw0CErqkUQM+oGUVxXxoADdpogPPzUU52xFxsxUgn0A==","shasum":"7044d8be8a95b8d9876f15451b5b9b456cef93b6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.c5c541b1.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5BCRA9TVsSAnZWagAA5oQP/Rox4xXyzTFb0NVs0hw+\nZa+0TAYWQJXiJk0fWAjnznrz0fMRfE/dgDyRNO23D8uCXbL13iZLDFlGh5Go\nYp3QZW9YKcuj9oYPAm6jUYcZIOpBTDck/Gx+D5T9W+KgN/8y2xVOw72HLCrI\n+Ha4UftZfb8uaHahAivO7ru+fACti/aDxSsmYpkpHfu8fzh1zLH29DM6t87d\n8rKFuTBizyF/TGqCJcpAzuTs4kQOHDaO4DLz12klxtqBiVNrMuz1vzZ3ozmU\nfSKwipP1qxUxzbgDEhutfAYf/zdy0IqRDWU6+OpFZDE9Juwey4OC/TjhpNiu\nEc/TmDzp3Mpf3VccqT2Fv+sTOhSg16NFjoEjFYiRxWB4OeBKHehTdNcFsJo5\nNDs3rP27ydjRkqF1/EV+U3jvfcsx7H4wDa1lXwVMU3vR5OaX5O2jketoBQpj\nWycGj4pOL/Rrz2Q2ueECWgWU3XjWA/pZf+W63LcOGB3yDW8A53fT5OFrdxAK\nlj3qrZfXvltP4YhIOf93PD7+/GB2UbGxgyZFeUKMqt8nRWHl8DVsVJS+F/kh\ngtaglvwnyhOkiVl4j1N7tdMGP5nofINSw/CFkgcp0R+5ZqDAtzx8WwyO0t6G\nkKuHvExPigB3pQZgRraLVfN3Z5lflKdciX4k+nnCSTFvL7d4a5Aq8dTFyZa6\nJKy4\r\n=ngF3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAUmwMdI08Q1bl8ZaafN8mJqSh9icOOq0ZNXetPwMCmwIgaawJ3WdrRadgfm1/2dfs8UMkU9TASCE10nNhjrHCG4g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.c5c541b1.0_1610477120947_0.5532575464135778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.06fe9d90.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lCQ7EVWQvjOEZu9Yj69Snrb4CGcnrHTRtXr/VwpHE5OyENyY7OoJTLBgRblIxwV98v7Wof3o/02FesGmOswyeA==","shasum":"018eb6d756f1002e0d0b33944c9787b19413b418","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.06fe9d90.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gybCRA9TVsSAnZWagAAvqAQAIhulh9K+8iWZwcSIBCc\n3apFR5TeiJJOaarnsUXQLaVlxkxtYjbOIHmYFvn1PV9WTbYN29USys0AeGd2\n8azD10kENGh6TcauX9tcOavf+vWTsOM1IVO167dkIwCgmIEQa8GhubT8rJGI\n63hHPMGA4gJ8WqRN67zvivlL4JDJLoZzyOlA0MCHOvUENPMK7RDoB7BGHXjP\nNtaAw5JVAeTbPzNwStSckOl/pWbqDWJYM2zabCzvG54R88+TmPAMR9YIuElZ\niCBoKJWmc9GEdkIB/W7GBVpDJS7UK4916AAmZCSJMlQoI2i9+jkztuwL/UrM\nXwqlisr8oGOAowPEoLFnkb2fcrNs0OFuhtRZr8HUa1C70coB5Gj+KHXdEwGL\nh6I8RYc+tMHRUsLBT/bP8dnvqYqE97ZmuPTgRbEBttEyfi5qzalU1BoF4tD0\n1FoLjbkNVuGUNY1dcbifa21grixCWVxI3PzQf9BHzesPMOMtnggGj/q/iR8q\n/noc3gKTW1yB2Fccz/QWCoC0l9WUYlmyMMdFKjyA5IjSzAfMY/N6UJHLOssa\ncd5F/ULPGbH3klmh/CM67Rovntdjrav0sjNskCQB96GjfbL++VXtsDn21UCY\nJSEO+6BCLQ65rR86bobaqEceC009LrlRXmLfzDmwJ5Z5CYdWLi4qieepeAEx\nnWEw\r\n=9LRN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpHo9G1Vy/4CVNzKOVAhSM1+aDDC5VA8nAol13JwzBjQIhAIXcjNrAMKdKYTh4QOFOHN3BgGAjIHI/mpEgjtg59kCx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.06fe9d90.0_1610484890691_0.7108004988421337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.269eed01.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.269eed01.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pbrVQJbbewnCF0nR/0bLaq+M+b4EhL9u9hL7jYvxzwnhf4ZQtaao32o2KmZfL0xrFDknGG3Cje/W3BLiKcQwig==","shasum":"2c4d860ab7acf57b882d8dd016338a331a3f11ef","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.269eed01.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2nfCRA9TVsSAnZWagAAn2gP/18GZIPrbC0YgCWL68VU\n7k3FJVj3yAxOgvbrslebODLFD0AztljhiwTHgpjK3SG3LLs/zXQxpW9rkGfG\nbnhSUTMlOrimxg3R5vFEQxF8r0zebVY1f4Zsvt4cHOvdzYzNHPgE0Qbzv78b\noVxjDhY883bLsmNvjZwBbwV2lDTsEuVj8JzCwEs1gGUv7YZ7C7IuJT+sSFBv\nNxsH9VD0tucypTdwB177bCg83O+JxtW2eYUazxe0TtgSB/rAxaK91tEtlF5E\nhVe2NtBhMSS9fQCWUI1kD9iL63mbS6M5BIwvJIblfjclJekjap+3/brcYHrX\n0fQwdHeb+wuC4QFXdTp6nlFH0bBylO+RPSqbKDcxBoMykrAoi43CDbRBAf1y\nOo5NCqS1hPC2NwkVD7RUUjSYSPzBTV0LGMaoZqQUPpjkLvlru1qFHuGHFUCN\nukqSXHfcueKsgGSop+OVdamBd1Mj4bF1+tqrQHPblsRgiTX3eQ2hkUn3E8wq\nZPP5eKTiWieh59NmqEnP8CCmNogfVwKEBO862fwIGB29Zapwy3jCJ7OYShaa\nlh+ni15IQU+2lF4tKv3uksuQRn+SqHDkrRe38MWHC7+LnF7AjU8FSF540hcW\ntAW+ntDeo3DDhU+4cagCZaCvH/fuo24iopOiFDzwQ9H8C1DcnoVPwgFU6UhS\nrUSC\r\n=xTS1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHIFKgXe1mSVx+VdKwX8UIcLnXHmcGhD2TxqMxjKw4iAiEAvubHj7N9EhTKskqhv+zEQ7cpe6Daa0ghbAKnLHV8MUM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.269eed01.0_1610574303016_0.7831342575741378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.8c075f35.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gIsUCHLGmA4JRNneHIKFanASzUcIUuMg5obAHwr+jR0CjIa/2wiZk/GJWfA/I7wG4QufMtfWAxNyDj4jM+QlXA==","shasum":"c90e99c3c41ae785c2b1218bb2984a2ff1e2dd30","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.8c075f35.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/30GCRA9TVsSAnZWagAA498P/0dMEFyRoY2o4S9+5gOk\ncSsIY3nsu11h4qQRDKupPxgUIwjdrzVMsYkhC6wKH9y+/BJPAECvxj793Yj+\nf+ihJ7ckWhp0Jwhx/ptbwou1P4Oc2i4Y8hiqxBIqT4T0K5VUDbdwApa6u3ri\naTm1to1/VpPFhVQ4+rtVVh86tMSD9Bbl7TQQ6HTUDufCzLjJxWXgaRbDWGlA\n76CZptu6cGuL1R1MkUv0/UnVh3NbSbETWR1MZxBYeTnsMN+1HgFjZW988YGL\nXjRTbLRDIMRGnqwL4wAgtI/hH1nGhaVp5ezigd6q9HrnqjqYf9df0F1jhi64\n7F9dYF4xPaCEXvT+koL/Z4Y1DqDu8SUV0z6NTrz1deAsGD2/1MAxQPvoJ+qY\n07MKB0iFPnHsYPTkRfvcUhN9ZK/x1ERFZzoq/9vnLrAkck/Zin2VHv7ypX0M\nj97N6TkOozgkOZINTKC6WS1gTIXwPnjrqVKW/65NKBrBtfN2au8mkmKxPrzk\n+3j33B01QvR6Ou7m8kX8Fuf2arREF8UI+DD6aRes1+lAZLVMfM4fot3oQ975\n9Q32XRV/fZf/HtWK0QgmF9K1sUpcu2xJMHqApH8p5ie/TigvqT9tafBDFJwb\nbpmhC4DUEvuJ4OBHbovZYZCohuLMXyUST6qhLQZvEnVhelcNCp3vw0xf7AIJ\nvTMx\r\n=hkUE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASa/h9QS6I7aTjbzeok+JPvCwWs4s2l4SP5tgxfAgcvAiEAu4E9d/YpyIVeIS19Ste3VvlritQzDLo3tCLpZtwGbds="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.8c075f35.0_1610579206217_0.5486732234494966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.3cda381b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gnZfi9ubJ0Om89nMyd98PlVxyenL8ct6lZyYCQR504mvzUdoFo2bc3XR4JxB06I6THFaQu3V9mTIxbBFe/ik3A==","shasum":"80e41161ebd8ded3697b98873557f5515958d5f3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.3cda381b.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qICRA9TVsSAnZWagAAPYUP/i//k3GMR0NFFcCfqnjV\n4USG9V/k5j8EVkZn2r3lNDDzUPuBzVUCkJdeMuUkq1UiYzSEbwU7UaBqY3jP\nRWWkYJZXWwqbJ6PVUIJYxcilWCEXIcCMyYIqX/w69L99M12CO3F/RTNjJry4\nYSJDrptpCYoEUpOmKamY7MubSSunyzElm7co5AgPtN4tKEoC2snz9nIO4a6I\nmflDMkSY45f1gOQaS23tt9mHt7aQnOWvMXABdPkJ7AH3kmQjz3JI8J6Nhkqg\nuE5POe1QHjo3woYapjE1Mamih6mo82JVtD8h3b/T5789ISiqL53ecEHWo2x8\nnNtvcqxZCNqpBUi0Zu0XEYvhrKCm6L/EgNqn7oinbs/fhc5np12yJ+tIKchy\nKcuN+XFi1Bvd2T2xaC4WK5AR8Gl6yd4QyjI2HEDMRm5Sw29pTEsB9k7G19Tm\nnOWkIiygIlIX9zm8QjuV8XJRk4fOcGV6HjePn1r2qqF/ULpXnEUsg4C0N5T3\n2ojBV6dXfIa9cTqBUeXQxDwoL/d+19TLjWNryV47SERnPtkjJVJ6Zz+Wf3o5\nXLBcooIvXde17mvXWKi+lUomvbaJZ24TK1ksXG/0U8hKhVuOyJ+S+Hx8I21x\nGOeyKHofVN2ucrDl1yaiz6rwC0uUjaJix3b/Kre+L5GzxT3jv20s/s3oA7cN\ngxvG\r\n=58Rj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtpUOcwMPXGdcDnilYoMxuFqESI8tADxGy94+4/nSN4QIhAJ1yuGWIyYl315KdhYvYo1o7/Roz1Ue9HRBRfNx6ltDi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.3cda381b.0_1610582664366_0.3397570477034393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.bc113605.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bc113605.0","@material/top-app-bar":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.772cc1068.0","@material/elevation":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-c2dTqwfYo8jpTm3VnJgA1h+T7Sx6UosXE3F3+OuG2in0TJlZ8zSTkBNHl/wgA6nuriZQoXwQvV7aj7bD5xdXvA==","shasum":"ce77482d5995928b9e5476ea43b30f520d27fdae","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.bc113605.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QWCRA9TVsSAnZWagAArlQP/04x95uPZHzXlzjY/Yje\nigPDacHw2RSPI0q/Wyr/lPW6LgTk8HQijBRm2qVCS/DRlmsVye6lgfUVLlBE\nDPRBZzYHZVk6pffRWkyUngdE+0sBoylcj+N+KoBNVznvX5A4G+arvf4Dymgh\nVqU0Asr+xGYkx+nTqVcsJFQWXana8vfXql1zGlkR36ZCmYdBA42in2kLM6gJ\nyR6bNziVuiPXQwfg5ckVd5w2Kt27WiAtdKwEGl0/GIfPLlM+F4YXlV+dWjig\n14lymkPuwZ7sYOEniWNN7RBCNgu5lbfOJdKwDuweNxopWiTCFqFHlOP2KMHz\nWi9xJaGzMpJduKkoQXWziiQ0zGfDMpEJn2CCMl/BCWBtScfVBDTL1/USEih/\nPGRAIFHE2a+2GjBR3DshdTjacxJHA4R0u9K1oQRcJcSVO8wEA3PDeMEcexSR\nO6cTnh8x9j2HTYhQa2YDCVHN2WIHyGSsq7QvT+ZQWQFgqIwi+chd7bgdwM7H\nIm5F739QxfloXamzVIswLNEn+TMBL1zM+5JezBZ4nEoCXcCPPwnRq8exZprZ\nmUaB8fzxOZzQbH17XJm2xCMcy0ou9LJjNR+jbqCZhNbN5sj3Iugj4TefeVYt\nkBVzompfTG2JXgxSLsrOQR/R1S3m6P5qvkxHWYC3Qb5dg6Zu0rDezZFHwFlH\nDOwt\r\n=iJQ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq0YHYMY5IICI0g5QxXUKIqEitRZauuw5c6kSIa7pfdQIhAIPiHYTnn6ocAirvroh9rp9Sd2MMNKtLyUAQ50Y/sHBB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.bc113605.0_1610585110579_0.9223333613564741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/top-app-bar":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.772cc1068.0","@material/elevation":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-4ANC4qac/xO4YozZvgT2H9zO/yhw7YHEsQ1X538VyxU4UltTf0lsT/JJao2BVjNeIIG/hmf/A2w6Fr8au74ZZQ==","shasum":"a1151f9616d39461c63c3d77dd37427a61504da0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZgCRA9TVsSAnZWagAAzY0QAKMpyfHTlBtXakLxrRUo\nreN/8MMpQnwRl/JdETA/eLSgWU4a5jLjIHsnmpD7cUO0VkZsl4mA2qu8gX4k\nMXMY0zohDBgE1d9C9r9McK4ZBrdEKZpAgEHC5pJlfO/mNzgeoZ/vPIM+WNwM\n6J9IwBY+4/xPKexwzbgS+ruAReEHYig5SHMWZk1prL4i6L7XC4CmEjgwWLjI\n9O6xDgO5UlwHpdcLV5fuygZ2iTurBJwLkNPZ+vc3hjOjKxo3IOjJ7okNUiEB\nVDJhlfAv1EnEMTDBY2DIxYzFs040IdQK8HwxBRgov3LNpiCM/Vm57N7ysHsO\n9pmkCQuEx/oBenMSs+PGfXbjZRq66g+W9rMQlmkmHPzgVM5MVf67JV++uKWZ\nUAdihvLZQxP+PQRuR1rrO+PPa4v8TFl0VxJvuMLDbbaPZAUxct9ZZwKdNgQd\nXNq2aUCoUI2uJU/yMv3SsMwb69FFrgNwwo4f587YE1/9jikjZdIa15lUjmYu\nvRH8yw//wTY1PyHCXbpGjT95+BgaAofFP9S1rmkESdR3E0yW2Kx8U68VimKI\nK2kNVoIpQ8exKrX84wNOKulcxykF+nL84YpnmEfvZZynakSvCWx9l51Z5ew2\nxBVh7LJKEnQDuIol08fl4GbLCRZVULIOBotaV2j68YrB0imh8msWLV2d3kEw\nUmrw\r\n=5bTd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJ00PofNqnBdvDnxAdLTcvMnzKVyW32duQNE1Q/cvEcAiEApKw724AVWb12JfeEJYBPKNa4i5qW9VHZZxUdSKxkvIs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.0c1d6ff9.0_1610741344523_0.15920131596861253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.b4332e00.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/top-app-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Vrxk7Qiis7g6sXwRKkDHlhW0h3WC8qxgJT1oavpinjvSDP2tHRXuB5WP8kZFGrv8QBuS1YnclyAEJrWqNMYyPA==","shasum":"7738f2fe92eb395fe4a0bb46f218f49c6ac597a9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.b4332e00.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIXCRA9TVsSAnZWagAAMTMP/3YYVlyWwSIx4RaQV1J5\nIc4DnHsVASb8R5o1Cya/vLorTgVd2b8liqO2XqVGOf+qpylOHoxQJSzqfDAE\n3JVIs/S2Lw3otd0MBGNuUm/ftFOq0tFlkccgDiW+ENl6FDUtwPb549few9Ol\nulvaBhkOVeeb8wkeKSLrt5qwEJSOg4xNytUBEPhYyBsVuqkef2WOqgTc4pE3\n8L8WFeE8VJGnIKwA3MbJQePwQ4frZjwEARXwmCORRwStcuYfIE7PNLRtcGD5\nB17Sx9ZUnAS0TPMOJWAPNlLCFjuLprcCEs9rrk4EIxQbZF96BSfF9Tf3HRgK\nkftn+ByPWYSQgWZj00LXF0V3Cljv3/O6Luh6htgb4z2wgfg3HQtJMVOklITi\nUSsfuqCcFJv00/Sm8tCTqh9jE99UosQ2yR9qxK3SnnBdcxvgOnK+y2GAKVbl\nFdbDj4QCe4cgPEOO3pMkcM29tkK8GMU9yk4pCVn1/xMuTj+1G2M2jGcuy40I\nEt0dlvPC8lLUZLZk6u6yvEnDJ61u1J1y/B223yzZmt62UccZ75AEEXpxc2W9\nM4RB7OQiWEv7Hups/6qg9JtIYJbGmYiu4s0YZ5Vna5N3/SNkaRDRmDxoiube\nul0nVfwym6P43dUIgSgK520Tppmp8Cl0yUspl+cvcLfjoJLL91r5MkqRlg89\nPTtY\r\n=36cv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzOiXbeGCizTx5tdkPoH8pIUNwYjd+4uXJKJwLbFYoIQIhAOotPjxFlCwp7/e+lVUI4vpnLSrELjbaZri7ARbeXVPU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.b4332e00.0_1610748438906_0.038995459931967735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.2899691d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2899691d.0","@material/top-app-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-/2KNPdjTaX/qT3VkM2qPGUnRyme/rlTCaeb2I3FPUT/JZsVRv5blwTIZQx35ya/pDnANs2L1lFrHCJ9UOqBKKQ==","shasum":"24890bc5854f09739b38e2eced2f93239b9d99ee","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.2899691d.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkT4CRA9TVsSAnZWagAAMgIP+QCqvfMuw2+cgaNO26c0\nqxUpq7nQWZGQiu1OvJoyua/eBPU2wxZTqlV32ViWBtjyYiGQSzrs6F4DlTZW\njK6moq7PfRe2BV9m01dHMQ28MOzVNPy6giACJF/WfW5IfAQDpLaqX8MFhVaj\nBwSh4/oNLxQOYYPVuo/8JSA3F6rhcDv1LVUoubpeJRLURtP8fcyv0wgyMUXU\n4veZxEEVQTxYwm0QK4SghbHpH4KnG3n1QLYRgvh/YyZvGGvM9CLjCc/g0N01\ns7Ge0XrlyvnaF3fIS6PICcP0WGe7P/6lHwTbcyTW4Qav6kgsLbupnUMRZDzy\n/YrxHq+HrMydMYQJQdp8S5JWsySD8uTtkGg8soAcj0TsVFchdEvvPIBZGOWW\nWpbzsIO0XQpJMVQqKA6S8ogb3NcMSJUXZxmsberuRXks5nruriY+Md2JKPEv\n4hpjFYnsUPu1MrkJxcLrkGxmMoBO0JKmMdgaw7Ik0BeIg22spiTribjZL6+R\neHndOErGHM8hN9d0a10uOwUOQCte9zIVVJDTHz0oA5DbrTbZgGs7zz49QCX/\nPKH3ZvFP/SKtvbQ3J5BZoTTw0y6NdEagIz4DRTO4s+0RG8w2kaQKOx69Hw2I\nv0jNzX4awf6rU67En7hJNkdWCOr/SQY27PnYQ+UTg5l40p9up+7EEdZdZC3w\nS6Ya\r\n=W01r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7djjKUIL4j0nDFonzjaCed8bZvyFF+zniMYfIZt2HXwIgHD5DFAlMS5/vE5MAgwrteMSki+YTt+8pMqpHkAoFLXI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.2899691d.0_1610761464272_0.3901783870787865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.fe73953b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/top-app-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-cCsH8AsZSd7FwB/0nWeIZZGErsP7vOlbFoqgTag0RuKBA7c/m39N3LIFfhmkXuRhBjs860lSySANVOfNkQHi1A==","shasum":"d4cd19ddf34c24eb9cc4042761cab830d6cb2566","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.fe73953b.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzEnCRA9TVsSAnZWagAANZUP/iA8AeoNXJDjZPmR6Ke2\nYhSxjr9wEO4L8edwoEnuwCAOPEXSWo+4B45zPJL7mvd+yAxy3xDEveYmf3wG\nG7Y0nBfIjRPzfpBELttbeAie3RUPJFXkPfFXrFiX7V8kZI8LfFAoY0TBg1Jv\nyvvlurav+gkGGQiiVdUM82xrpeO0shNnwAgqu25ktJIIKNj7TYOLjX0Lsqww\nu9mVdM9+dydPFPeaQ1wMASuQ5aV5oi6yTJ7FDweap5UVSD8XK+++lg5xKVSF\n2Ckc7tiKvOknq393G7AJdBbp5EPOoVkv6uQuGkvIYeBZ+EvYu99R53Q9pgrQ\nnLKW4gaswSsOp/sL6GIeiNqpktpBKX7kX/wFkrUm4uictuNXDqfbZmcblexW\nYDnppqKhM+51jwd73v3rEFUEc9xEY3BIDNGRRdHetRCej9cB3eBFR/cxvyX8\nJGHG1udBSdN6skcrNvnCf5ATazk61lBtWANu1YPaSHmPQ2ctY5n/MPhyz6+h\nU6ae/KCdwpjfUbkyHW+H48jQzhbTzQpgG4FUyHHSdFIdE58j3hEUGQri/qcp\nhNrdoDPEJaPoLMIILL2foYBW3Vtg1MP90HWYeNDmlLZfBvg4MKsixqpjMpbl\nXtvmJWHku+ZaQckrvz7cQ0oginh7Lu6m+t/MJOjLiqUheTMXevnEX3gMYnAl\norMd\r\n=G0IJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAO7pET68ZiYn4Kh2pFplIrIU0X11za7LmF9/ZdXWaHwIgYjNc/aHnvGw2RHf3ITuwUlzYbigtaIX5czwe0QNZt2E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.fe73953b.0_1611084071391_0.0151505808433261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.d3a16455.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/top-app-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-qwawqPDJEJjg4hqicut2qkHJ5+RwDqpwPU52g+U7b9YazJibyQIR6pVRsqopjsTLpv3p0mQdXB8SyXlQXRn+3A==","shasum":"be677ea68d51a3338d18946d4c8f0544bd45270b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.d3a16455.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzhpCRA9TVsSAnZWagAAAVIP/0uZG8kSJHjbxtvogJL4\nIrAfNIlSBJdYCsk/KRuMI8H9W7aPI8khyh+ioRG/I0tA1nK8HVbZwoooj9a/\nXw7qYEP6xnEgmtR6+zQQU+tqdqha/7ZGtwI3ApCqVKYWLl2S3zD55QDzE0J7\nl76PVQEpC+Zgwva6VO8HEZe97Nbkx41J52fLyt6SzO6J7vjiRs8xVyXlj0Ga\n8cBNOixKVajQNU9Su1D8KjHEvuwn9CuwnvZVrPHCdaAJGKre4vkAg3peZ5mU\nyOZlZ8L/mRqD2/RQ93vyH1A6rXUXLRswwhlqekFnZhKymKsSI6P4O0A/tts+\nt3Qe6SQ339baQkQxuPIAeDo66/VoKBqTlQA9SlVsWTxQax6o6pR/YsGn1NIQ\nFr2XxbeGiPQNaahYQlRo1HxfkH/OaOvLhYnAKpU/ENJr8YvbBJPKF2v6sNLY\nP/XVhQiY4U2o61n3X0EOzkiiOT54nSn9bswMJ4tG11lEgnhDq+ZucCZAg6Yh\nxzX6FPyt9RLVRLS6jdytea9SKof8GLgQtuzu/0MIsnAv0vfuydI0Xp/4eyXU\nhaTaAHrXpO4puEBap+sESd84DSd08xcu8IgSsO89BJwJbw0j/kl+FVMa0vi1\n+ry92EqYATKKsInn09txoO7+B3+Qgq7L1lrmAgyT5hlkNZcUf0c1aVew2FVE\n448u\r\n=/myz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLDAVB2+XUY3yMnyINUnWSn4D1/5dHYhFgT8Rzb5+GZAiAlLAROE4cir/iZJChwyE1fBI/eiDldD0zuecr3nHiYeA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.d3a16455.0_1611085928823_0.5239673656935309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.597ca1b6.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/top-app-bar":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.b2faa116a.0","@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-5M5ltUJCaLaq0AMjBi0p5f3Qee1NlJ2ilt6qWFHfH4ORLnYVJs7K35NL/9UxBJU4V+wObOUU+NZK+PTMn+LC/w==","shasum":"eccc2db7ddc6483af2db903a943ea64a331f5275","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.597ca1b6.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4B+CRA9TVsSAnZWagAAfuYP/jNfRaiD4Jkqg6bNqReH\nWXvbllDF7sqNpXZXf0CQKsOyEN66FVRJgXs5xIVM5i96IeYMl9jIaKxLlASr\nl0RVWarn+rytVa5gEga+DimLuAKSGdob6yldCAOCi3c6VLw+VusjMmS5IBLG\nFU5Sn024+sAMbsNG1wqQVS9y+Jty+LbMutIg09mY1+nOp45MFWzlu2iCTJot\nnJREvAcKAaNaFX6+o1AhBJzKPSt0O9Jb3YAlNmH/as7TeNiDKl3i9acB8BQ8\n39cwZBO9ITY27kqjSyN+r0UxC+Ord4qhemI6UYGGqzElVLDjMf8u18yAReS5\nNd4NTNsResL61q/WJubDfGuRvBRowQ23e5wgpLVezgUXDLrWsTs1kz2IeWbL\niSCH4aG8UeOoTXR8dzpq00f2pL3kAot3tbUsYnxMQXaTuoNkgOsf7QCe+TRk\naVQoei7dt56ARDG0xyHH0RZbSmeCxa7r3RS39xT8B2o66wFiB2wNj7Zo4Kf5\n4cl8o+ASOoUPexNWnvumnF+I3Y1DpA0XK3NZfMpx0w6sUS83P6gqki2StL5q\nCzVlm3xpiIcgOmlMEV6vt7+Rgf75qUHpBOk/r/++JXx+IiXITJ5d+1h6WyUu\nfJW4iJR3o5y2i8iTSEqvgRnMXtW5+CROPrurGn78czUyfC6n75BO7IM+sfS1\n45gp\r\n=XrHl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHn+dkAn3Ij3PBtvzHR/lxOfhNDM/6pU5RiEGiHQ/CdOAiEAqtEYaCvcoSVPWfuOIrru0iqQ4bl65Ro6W0BaV2XaorE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.597ca1b6.0_1611104381864_0.4597177083229922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.3c195efe.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/top-app-bar":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.b2faa116a.0","@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-r/by5WXary/PcLGpuQWMZ6v6A5VgffkJCDBUA8Yld0bpz3tcn+pJ81Zl0MQ45ryl99gJtbxat3Qqu+B/sm4YsA==","shasum":"5e3ab8600314eb4e2d809dd400edf9602f00bb21","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.3c195efe.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB47sCRA9TVsSAnZWagAAIBwP/iZ/zpd4oGfn6vnVuqBS\ntKmnwOUCOsWEJ7Q8ME3eD1aOPn5Fx8kjWuKgsp97Q9aV1vNYBwPfJj13mCBl\nccL+cjSq8fOTPhaSAlLG5Ob/WE8VKuBCoF9RbkZATduTEbVFQTKEVEG9mrtf\n7rjkTLdzMc9pmZBNIiGawDM4B8S/71q3gq5sgXQF8n1v/3NJaoUCH6wGkC/k\nO6c6aTZfXoSEOzfGnlWmTVZu9M++hZtSBd9RLzm0CpI0dVo1rysahV0GBKL3\nJ0mImEsW2DtJMzBcDOZtaF0EoTrcDB4MUsP8hSCuU60lUFGe/m2QDCj6TogK\nJp7kECFNv1+13y77u08076eWvwLGQthJAzCr6zAK/erOJOMw9rfBCV8yriab\nCRJtcao9KBwTXcGLfQ1+WChRi4rvhBcZoErvHx17gbnf9fvh2VKqg3pZJTiY\nvGPLhlMTHXrg99OsPdkL5wjcSneKvKk69dU+nlNRmZxfQL1Sn2I9edXVR7g7\nK1Xz4qmtYFWwShDlJrVbhzjHZY8wRn/oc4aWLCyVSt3VJueC/3J0wPoAOACP\n9mpG7BHPXNs/OAX/LDWVCRvsIiBsYwClYj3bmT+nO0y3nTKkwZ4oAKuDhX8u\n1yZxjupLvvkYfuAjvSbcoZcAQbXyUI/Mgm8XrXW46eTyWsOrzNH9FMhB/Tp1\nSS2d\r\n=ZwSX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAiyVk/kKJzYs/tYHBtHnPAhQ3bAqqVve398oUj2/yOwIhAOazNNndrqkWeO7I5Plz9w/TWoyjbjXJJIH+yvIGZC3I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.3c195efe.0_1611108076399_0.8010971082776261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.f7b8755f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/top-app-bar":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.0c95c9f7b.0","@material/elevation":"=10.0.0-canary.0c95c9f7b.0","@material/theme":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-QIknQeG3hvcuhUQ56ygrL3GO66AeT+6N5FosGfspJnrCf9g6HEkU+ChAfOO4OnXqnO/pXbsLGDg101ZiWRsnsg==","shasum":"6abc40cecc9cb8fe816679396d2af225469ceb83","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.f7b8755f.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSICRA9TVsSAnZWagAA8aEP/3qHmTYe8tr4K9zVW4/b\naBhU0gvm92A7dAxeSgTVmkYUyEd4uFK/lynoZjRSkPQg4jl6SAyeOkPOkdVv\n/nhxmIIRewIddNSSLNrJoLqMdyGuBuRmgeRbGtwot0MpiKCPr/OCHm7ukHJ/\nFP3jsWpviNVicIhnA9TqeUmubszEohO7TDcLizCUzNcysdx1s+Px82vn2Ua3\ngT6oM0opZjG24y/b9qDgUTj7yYJnvuCZUIgy1WW62cUtcYR2IO8GMjDi3qEy\nTvl1m6C4jfaozpUHzG08r6Ts/RvV3KwuEfprqMuoyxXvftAdu/MS8JCjmzIR\ndF7g+VNE/B3YHlE3JVRcp0tLk2cj6qXu9C2P+kaZnG4VvTFIW/Cm38KfZmHE\nw35uNrq4aJnRD+6TxaYXQDZa8nTLtdS07U8RVjc/E4lw7Q1yuLIoUNJA8G1f\nG1u5eLF/AiTq3EG2SFOb9a0blhhaZ47xDrNE4sAKCcgEXTIETBSZt8SnScyz\n2EM0Ksmj4zNaJowtjBSZIYvYyKh2wDPzg0ku01SzQRHOJ42sFrwRKiX+QoTv\nKXP9mWuYdMLmwl6ywmlsWU6bBYHP3Le7i0SslAwg1589h3M9l9jRQ+C/Nngk\nUQ+qw63mBArQIvzmoaJJC1dWW6HQgk3jIAmbM4MNH/68fhyDKnAbEPMODoRf\n5wuM\r\n=lgd7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6IKDxRllzrhuiQuQK+oUUsTurWfYYlsL1H2Dq3UIVIAiA6FYKA07v0nJx5VvshhCKmfVp7mFMU0Wg60wuiMSH2vQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.f7b8755f.0_1611175048343_0.4965996314563721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.f60de7df.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/top-app-bar":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.2ed2d829b.0","@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TIG1GDRiyR2bIyAuRHkYUsRuucQjkIKa4/qxBiN/cLlAaic/B0A9dxiQoXLJZA1MsoMnPUi/lk8yOzfWALT4hQ==","shasum":"e90589fca46772ba784f15ef555c01ca00cf7f16","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.f60de7df.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL5+CRA9TVsSAnZWagAAasYP/iqHlSFSqskuwvQXpUSz\nljGjiveOzBo7+yF1w4EHu86RxUnCxm9NeZ4iXafnyKovBc7E1pnpqrtcKx7E\nFEobBBw3DW035eVbrywMi4rQEcfVKuXueNQgYs6zEcwZI+cWCIueHt6q1vOY\nPuMyy3mu3a7IA3IkvnklpJM/Bw+z0j9Ao0JHAhuKsDxGaL/O8nfh7lX6oheR\nO1Y+NmfYN8E3ZU6/a42l2Es6KDZFUY2+9i9To0GiAnLMcJjaZV308+K7OJoS\nMoJ/hoqRQuNqBVpP2qocBtSDF8yAoMVj8Cy9g+l0HXlA1Kr0dhZ8YJ0o9tJU\nnQaGwvk1pluIDW9k4F6x37MudfQFlgLnZ7edcEFIRXpAeN28dXYZ2wkez8Em\nIw90vo/UQ5iy2FyqOLM5+UK3SVadF+IyUebRSx24HEBI4r4hmWycyVaYXKSL\n5RauEZ8K1mDYITJOtqDAaZyVWluyzoXiVAntdbMY/7cE9epU0ss59ADsTXa6\n7i/z7t/OfiKCAEEYmaWKivCxJ5yqo8Ce2dWLHYl1TAJKGEjOxq96H60ycA2h\nC8qq3vmTq6CszaG/sxRweu6cMrO/yrFb0y3hmSpYonkusxVXbq8gogt9/ku3\n8YZGKpBUbBz9UbSoy68evmWWAdz6xakLkl9aNM/Fc0SC38mTvxbSLgXhWxdX\nl4Hj\r\n=qMNQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeaX+pCa08MVrgS/Y9nf0KOSSymw2Me1RrCgc3EmTIjQIhAPG+8sUSyHqqmgsNY1OdacliK4uwBmys0r7oyqwdQ38H"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.f60de7df.0_1611185790170_0.6252642571789286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.664a2927.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.664a2927.0","@material/top-app-bar":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.2ed2d829b.0","@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9qgYj91EGcE4633FHd4KguNDuwUG7KJuiMw6jXJXR+BpWkEx+Wnp8en6aznuf3lCYAFy+et08TXaDe5ontm9Vg==","shasum":"851c5ff2620639646715e1363c77375830ddf072","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.664a2927.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOACRA9TVsSAnZWagAAkWIP/iDjlRgMZHkq4wkAjOMg\nbwsw7b9vfqFe5oW+OrisIWzNVYa9mXGEBB6MKpNA+oUewUvrd38GFYdQQIHa\nEDhjn9z1GLtjcrX8LozLUj36ZZmNDuUaeK03eRdQjJdsvY975FlehcbY++5d\nVDE+rBMx30xVODQM1ILeNbUs8qGfKc82kxXvp6E4iW7mL26zv0MdRGuxh1bs\nKWe9yn1XaWZYaKItMoaCDApU79o2DyJ+0Rrq30qUxWXm1IOceG9kJapS7MJJ\nj0WDcLjX1CFzS0bf8xuN54QiK4RYV7UEg9OUtoTdwL+VxQRBnk+j1QucqbBk\nvP0m0R8hYoSIczVVJaeAnyA7TPiNr6gPQpBbSdjKajlyDMSGAyqW/+Pwm9U1\n4HFyY+6IkTXM3snww7PyC2kbCdpjzir1+qSikXO3ogPtOQXyMUPtuOAcHTRv\nes0B+7m2fWaWJRkCRAboYCiaIZ1ikLlTJX3FwpctMjamyZIkHAyMcCk20xnC\n6Z1dIHdPjqds3gmFIz9ahPCzfNH64NGSEnrWB71HWJ1lpIbgRrx0dYAM//30\n02asb55b/4DvLyU9LJ8Rn4ry0WyiVHS+Kr3pKpDUzuh138joYiLDwcbkS2Ho\nA0tQHo/9Zhhl1muFqmj9PQi00kiHNb835vkQChi+g1BwGLtVlqGCTDQBAINK\nzU/H\r\n=sJRa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuYnEW7Q/m8/VbfXo0q25AJ+/KFQH7LfktPApasXOJJwIgfUrYnrPeynleU270Mj7iQsrWI9qBuE3qx8vuTtVZqFA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.664a2927.0_1611256704244_0.4702463101680707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.a6d312e5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/top-app-bar":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.fd61b0476.0","@material/elevation":"=10.0.0-canary.fd61b0476.0","@material/theme":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qwpkp/yFS+Mb8WtqR2JQ0nR5j4z2y28lPS6aa6zSOo55A144LaZu8K3jm/A7/R8tC4Ez58/dsvG18ahnwxunyA==","shasum":"41b8b674fd449d4faa7974e108fbdb2d01924c1e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.a6d312e5.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZsCRA9TVsSAnZWagAAo1AP/3wYNgEaBPb1Ybt6fM3D\nc4qOr55KugoI+haNtxvjs+sWfNmAnw1FimLPIlbSRQMKNoN5ECQjLfHbPIDx\nDboMw2KgZ3jmS2i/vy8l5hBYpJm+z5l2rTjAFJeGfnfSyzN6olGdDIOLK3b8\n6n4mRW/IcM54dxVCb+/8p8qQluh2yu4jTOzghobl4EJmBIQ2m5jEkEOXgHz2\nSxc+QpmUs/me4oArhz+h88KyqK1Jb9yjhv/j+xay0ZMNxqpe4d58VLXVkfAs\nrQ9h/pVNGmMjinoMepVNcd2J3Kg4f0kg9AHK8cw9i7NIZdTdevs3rxPU182X\nooI4Ak2xteYZ11EGZbxOVTsWGZ10MMeuaIe8I/m/l3LjcwyegRg/FwIpcxBX\nG6ygf61459p8jct71aM7uu2ulXJQ3wd+g02WZ6rFMKNibUzxo1qo/XXw+pjw\nUTn6LxThdSoFRyTnRoqcYbAE/LHzmHmkZPkPbW5krrfVtKkxti6a5nq5X0lr\nOUao14pWIU2qHClizuyFe8ZT82lXwksX08UwUHpwsBaXH9kbpcQidEXywzTp\nqd2w7Wwr21rHjaSFccVfS6pS53UvL6MMTok1AEMwOxJtbzRDPD9vjltfIZSn\nD29rtXUOSS4Z53B4Ur1W5czZG0GVlCbMZOytpvZYt57S1t1DPrUa2zVVx5sS\niWB0\r\n=HHNs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr+kY3wVn0s/nBmYsM7rquf+peZDyMbMDjbJ31M8maWwIhAIiVhw4V8m8UH2Sm6vbOZAgiW6XZek+8PuR5rMOyYRu+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.a6d312e5.0_1611265644368_0.19670262797437132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.027365eb.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.027365eb.0","@material/top-app-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wqXZ6KkoZEBeolkr9kTKP2sa592mXQ92aSDm0BW3HECIFkI1qusl5NwVr19fV/ua8qTTYX6d4GmkxykwZb8AJQ==","shasum":"59873046176b3e035971ecd1d1eac7d1293233c4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.027365eb.0.tgz","fileCount":16,"unpackedSize":66328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6GCRA9TVsSAnZWagAAWmMP/3gqGNCVr71tLF4UmwP8\nS7sSj5NKWYskgxfV0bTa7lywbqdNGkjgYOwlICJhPZLORl2ezerxMECwPh/f\nfqO1UI73+gsett0NLwB3XZj2mD88O/JDvnUl7hIPYJr6CtsMlIIIW3MfjhE0\nWtK/gC/Azd2F3mdMIUjYrElGLbv0e8txxnFBwxWNui7LW4VeRoM0j25tqm3w\nF79pbNaOMVIQ24C6g1qw8OzFxRIf3hoZsdGdo0vwptS1XA2lEqktdkSU4a3Y\nGKsosv7rb9SKL6CSfI5K5lv+9KZF2C99vSqxHqWJZefUSE9x3UL8knJWW4PA\ndrwgCskMlaitJIGwv4Y0IAPfQjc6BLH+nco3u3m9jQP44jFt3HssICWlxiaB\n4wzweYY8U3xsVnCivSlrDpAFHl7drAlUCvbg8xi9vWd60Rwu+KTc51r7P+U4\nyWoUyOV/QVNiaZZYWQobPFBAbbXmdt/lMw5arlXJ8ZCwnc0WtL7wEi9h2Cpq\nuIaFaNoAPdw2r00WSeP8QrHqy256khl4c4DZVkf/5xJlaatVXwy57k9SjCpW\nDpR7SQJ0zlqtJzkf0ocw+w4KBaeJNuMxZdIblYzh5P7Du/hd72l5ZG/JG34N\n0Jsj3v5rPhLXf6k1b+qFNdwsLqVcwwCU5FRMiBD/C3f9JhnA6HZ5b6fZtC9r\n5fvL\r\n=kEKe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZjMrNFF0uxg6TorfVYk1wH6BufgMcKUYN6W+2SDMGUwIgSKYpSwNEFy2bU6iFZfBgNpRkUJWCy11G4+eZsVLh0UM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.027365eb.0_1611349638304_0.8608142017157911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.7e72b66d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/top-app-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n5rxfs5EEVxuV5Wfv/nhDvaL/5XltIixZYWNGpTDc7MbQUm2ac71F+esW39Z5atI9K6rD7HvHds5XTCyFemFtg==","shasum":"a46246f1905c108ed04053be0853d16c84b9f284","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.7e72b66d.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18dCRA9TVsSAnZWagAAoqcP/38dgM7GqzQYTaRUQQ/G\n6GHtCvN1P/NGVQHUzZGZvrjVF7jNpELYXwV7XG5GyMi3Yhfu2xqPkTiN1788\n0dZ1yJTI0FXKJIhbMbsKfWsmLGV3O/dkZiUTDTLVl9hotQDFgLwOvrk9ljK3\nv9hv4oJBsNNFTcj9b58o7awDhi+Lt1JHYeMVOSPM5OBhRebKD8oHwv/WEW0H\nfPrVN5Be78e7IXGQS6tR1jmanezu4fuu8NpaRHADSbp6n0gZyZIIBHUF/bIw\nptLHpcGE+UeYvMg3Ouyik2rC111W6+aTvfzwW2ks+TshW4PoSh9FgJ4JM94F\nvaNjtjrEIVjmyqCRKAfEr/yoVjaH9cbZF3gEMiyoab9CdR63OrLW5QLCAYcD\nhWovfG+7q7Bw7yfLXCoO8xulM4D4EPwGET1bVgfOPyf3TGG3vXWWeZq50q2k\npdKpODjIpkZ0YUNuFoGOPVTac4Dn74/dnVezNBrkKs/Hkps7XD74sGRIMMbs\nDfw/cVXliwZ8LFeAswPnCvrlAKxXASJEJyGNWVSxnTQsB01jkzdosKhLimDq\n6r4ZDpUh1xNHCixSZCSILmFjsakt6bQle5Q7bnuBTpT3cPjbgiKIQSXyCgU8\nsa5ojSH+K4YmdLVQgoJgcwzSrosAnl9EE8PYxT5D2ysmVZSzsFU9aHHCenxG\nLAkO\r\n=Zq0L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDZGlNvvPAmXxDdNlD3Cv1f33ox0mmn0k9s1bseci3vAiEArd80SwqD291OE9pbyu2vMF8Ti8GyXil1izXSLzVChn8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.7e72b66d.0_1611357981186_0.5759683722793949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/top-app-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-o7xeUhw7CMgmLJJ5AZhbQd7RqxOizgx7NuzFYNySz6cMW1QrcYUYMc4T1L2o0EDZKzGZuSiYS+/epL8rb1OQ+g==","shasum":"b2d6108dc6ee2bfb9632eceeadd732b4a6273426","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CZCRA9TVsSAnZWagAA7h0P/3rGRUmF6IreNza4ayjj\nQ599I1/dvwpmZa0K8E/xoppbu2TZy32JNeQijGiMo8KV0mp+F0LknpsyTAB3\nOQe1BI68H4m1hMgWQvZscvBBT6fwfrzd5R8V2+QVaQEJ5FpN9yQ9Dv7XgyyW\nUK1lKm+c2ks8rhFJkCI7a9q746AjkApE9GH690kTQ40YnvY20WD6+x7cQSSY\nvy9TW1uhRwXGkLq6oMav73if7p3qxsyLErp3xd1Ag+NgMbMI14mIPzJKfv8t\nnB1bDCPgrOgkXlZI38vC1QxsqZfkVF7WT/AHydIieDSmpaeZGVPaZ9iBSuwc\nUK5ZXvJgyHUs7H62nnr4g3PkqxDCUXt/nXlaaHYbjIV0aM341fkOdNktdNC0\nZ0HeRdkVh4WibyQMmmIMYanFjDFIOVqYfWCzX7qK+zcaqHKSKmxq8KUifpGj\nwa+j2nfa8MVlULp2x79WQzrJqZYphReLB/+7TqZZeYG7ub89eiozxRW6R6g2\nE36VY6VeU1Coxc5ka3Dn/TmHe3ZnUspxDPp9RRTmvTqntB6ZlZuZCU7YLVEu\nR/tRAi3nPXKCw/tByJUwAcW4F69paBSoqqnmc4j/JueOopIkf0bKq4nM7aQb\n1oggTGexAQMfxe55JR95Odp/Ug4l/DxycRgsDA3GTe5MnKh8etGG1blxLPsv\nL4KT\r\n=rdQW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECs0LF8WPq4LfxK/FXmsbe3MDZvWaTTK6SGHYUXHrULAiEA0ahyMNxxfu2UpUoDQrbLP2wQoVPX7CMHNOpxxqHhejk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.a6d6a1e7.0_1611358361274_0.3383262413464827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.b95fe100.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/top-app-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-m15sY/7dh29J5MbdNm4UdZ5XX1+cQc7aHLY5ffCfTTUTpg8OUa/9nmFy5Fni2JD8TAciNFSUtS8htkdo7FVOnA==","shasum":"7030bcc1cef74235e2750d4e913ab2c3a4e5476a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.b95fe100.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UQCRA9TVsSAnZWagAAOOsQAJGX6f5FstZGYC24LsfL\nAJQYiCoWz0hrPXSqvXaaxHCKEI/gQu90h0yEDqhxu0/8DUBtOht+E/KgU0Ed\n1MWXRAOXpPw1FPJrB07hhzcUAe2p2Zl8aW9DfdZko6DpGjwBzRxWP6uiBnJA\nNNeMF0ttPDD0yaCAPbAZul3gGytLIHBZbQz5SW47NSWt1sZxY2BOOeMcMHUw\n4yIl2xBXeViKkJlrs0Ung6xTp+u9js57comRLet52qoFMyIroRRr2uarGWpN\nO7bBM9lx2nqonGIBjzJfnaV4a6hoRZNGRBIfQQC1fRg9fbc0QpwOQEN63P32\nw0RMjgqhrxGWD4C+4V65pE06B20Y6WndQ/l7XZTSp0j5+tlJo7bmFQhvOkP9\ntwkWFrW/M/qk8DZSj9nY7WQ25eiXFbCpkMZenh9zhYizITcT4yWZnaKIHncR\nBr/2jqXtm7qH4xKvl43N3g7eCkr5zBkNrLugYn3onI/F704Zvi+xLOf749Nq\nei8YGLGy6PwLfmTi9FO1FO4rZYRThMm1nDQEpWhTQfBIU0bej1yZRxdV7JTL\nAgy17Ae4qKjO/C4NUJ9v0LGHzy0SKRyHtDRRMJIWZ8VnyTTQkRXLz4MLYoQc\ni8FVn87TdiiquWSuuDzarFzLR1pHRXjO1wxCI8go2T7QMRCfOYx4Q3MwKx5Q\ngS/4\r\n=d/89\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGKY5CVhVa8lyR2rDcqmYsf8BdvpF2Pt8KVzQ4RhVqzfAiEA2ZijJ2Q6VS1wzR4G4dIZpDo8akiWiVhCAdntcPUJWTk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.b95fe100.0_1611359503936_0.3202460417575854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.c8797192.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c8797192.0","@material/top-app-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-N/UUPWZyq5Hpqs92azFRp3W9EA8j6qqWzKC2q6VyOkJh2HDwMGUaeGl/pUka5d5y+/6/MS+tqfbnjuc4muaDTQ==","shasum":"ac383c84b5f31274dd1558f00729515d1c6f9e28","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.c8797192.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2irCRA9TVsSAnZWagAA6XkP/2lHRoVEarhOhrw6kDN+\nvyJ+LYJXy6GErfCC0CwvTwXy9CyTGHcymBkRgbb79EnM8iVFGcDcbebJWyoI\nwMJvIGFo/yNtm5pWQokALkhNRqQ667mFHIItprqpqaa7/lUmWOI9NZb9NWa+\nGc8i9mTwy7+J95kgRHEQYciM2FaNmCJsm0QdY3e75B0K1wnYeGd6igEC7uUk\nAwrqafBUukSC5y0/Od7McVeA7yYVAdK+LXTXEXvpC+UmiTlxdazRUzKSwfM4\nxsDXxbONMMpcZhJ+y4rjZc3DvIK95+Rnq/3qhjIGrBoQoIWkOq9aNxtA8Wfo\nduPenYGslWt+y5/BTErE+czZjaiWiuzJxJprJApbk6ZfwR+43CvAzWKYI2Mg\nVEcSTEAmXzMYgLizsinq+ouV9l/vjir7taon6HvKiiEZcTMFH034XPFGbrfW\npJyMXZ3RVW/Jl80Usl2sK8ZBIdBvSwCmcytvlRl1rYT7Rh4klUyK/dW8x0b9\nD4eKUaZPB80RiKwWuWOLyqI9N33/JxlgBkVU1KeF1yF+yKRxuBO60FuO+5cP\nqzjY/rXVwq6fpU17zvzbz90vkTRSUgM8tjMw15moMX1I3GlwiM4hrYD9w34z\n5MizheMLPuh/owwIKS2Jnd4Ihndtt2AVN61j153snW/sXVbqxUwqDQ6AOLHZ\nF5K2\r\n=RUZD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4pqg8JvUtiB4/L+QX65Ej/yjQpjPDZa62pvDTCkJ6MQIhAN0EUWWoRbLxr9z3cxmAKScvfCBpmtu98Aybogb45NM9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.c8797192.0_1611360426735_0.7937096311307696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.946f5563.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.946f5563.0","@material/top-app-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9MG71yqcJqlQqGmWKUl0OKj9as5UJ9C9pjGekvsUcItTpeLvLPWZ6iS1fcHDU4MCvgf1LaNiJPftxIXl9IogxQ==","shasum":"bf9fe80eaaf59b601e8860451700987b939f3f40","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.946f5563.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3EqCRA9TVsSAnZWagAA22oP/2lBcSPgk5mjlKNOQhq1\n5aUsQOl3abx9yhdndQMNEEoeOACcJhdas+7VilJc1IdxFlqiQ5WREHoi/yya\n7z5PSoFaLNYXLSvwcqsYFXX2qMti2gbdQVe/U/8QmKYevqLLWbbtM4A+mTaw\nJZm0m57Gvd+/KYFJd1TPRB4dqy9+tPriWCSab8PouFjesan/e1w+KDHwTQfM\n/yGYA8ZLuwkcdAg1mqltct7JpZhDmW+RB0k6r73CnBRySkTQWfxdwRWdcU0F\nENVH6ueXgzQY2mBcWMwSxTPsnP9v+0DnYm475DWcrJWWMCXQS08DH0lu07Hq\nwF77dBmnKkemRbUvsPgMVKKqe9iO3J1oaNOryuSLn4prOx1sBaj5gBezYPt5\nU9w0oWgO9A7dfGZgEvJSBHOYAAga0Ofc4aGAonl1hi13ndfr51KWxCEjSbXb\nzZ6yn1YCLC2LTT1qhsSLI9Y3F7i3i0Sesrb38oQ3uEdp61hk5gvZIkL+v7Fk\nSx63VknfAy4qBAiQpm/rYmLPIdojVgT0dKMewDO35nvPd9+vB8juzVFq1AHI\nZzgYcif3s0dYkbnpaYZTFfXrrwFiiTaT39Z7Eg7IPdgQQEAMLTbU7L67wvMX\nPwc5ETQImrqQb5xlvaOPZ+X1LqYJR9dWxguxWX6A9uTKdQ+LXsa7WV2CGp6f\n3BDG\r\n=u+Ba\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGIfEDkceEsthQ127AXARtx8BUGkMwQXQNduyMxkjf0AiEAmVuuetHkprUn7zq46sEM488d+o97QHPHuyglacfvFpA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.946f5563.0_1611362601850_0.6032407719377186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.43664f0e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/top-app-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hJjVI+pcMzytRVWfbRlezPj4LUwaqSp8kZUU2qe04U54FXxzvhjlv6AEU1AS0qURnBeBcdyQ8umlB3LjhsTMuw==","shasum":"0f091b8213ae08ca26de703f4013c8b1347c2cc5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.43664f0e.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0i8CRA9TVsSAnZWagAAO1gQAKGK8eOG4cKCvdx0YIMZ\n3El9Ntj4zoBhfzEln1rsA30aQ4EefSndcOiRZfm+KTPaZa344p1BbknaxLzU\nD/L+F3m3DmoS6ZenrmVF4YSj/nPj6Z7MUXx/p5uAF/Do+b4UUSwJ32Ou1h7l\nt9ZjKY3OXIp/5BFSD4srgFTNvxWCF1/apQ1BifQMlMCKsaG/UvOGM3ygnLVR\nkWNLAaQu/K6hTkh4V0OFjKHSmeN5nC0iRjrhgE+dHb1XHyOgmfAQgbp29X7I\n1JqkU+FEjurY5fz+gKta62LRVtCeDDKxsHrQElM3cSaTfDA8GofOMlqkxmIx\n45iHLDOVaqlEjyNFtKXWu6xl37qCZwBpKL8YkUaw/22ewlsHh8XnQiZJvbS1\ndv0JRYWTcNmqLxigk/Gd+B1xxYP3Tscb0PvH64ourkgmxxKtzh18KDuXH+ep\nbyHQzY3MrAlbyDp2ufgEiCaNV080OsI5UDmPUNVX1tz7mEs4szIewImYzsv1\nwpthRzFj2sRCpprCCFbmgNPT7H9Mx9B2bG1ph2sfP6pT+uA+FjUJFMjp2QVI\n1WLWZjK6PU9zdDFFve6WHziWq9jcgaGiC+QADvXRyr253Q3zFYVshDcBoGSQ\nW+8o7HI3TX6N7A93AFQaZhrXCatJy5nGHnZI7/UZZguftf8jDC+NWM6ixyo+\navLE\r\n=Nf5v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCcDdecEV8zUAhQlKQktR96W4ndEPxshuAOR2Rk5WofwIgYV+z2HLX3AiptEwM6uzYCUHcjDGlHjOfoMFKLAdrHHg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.43664f0e.0_1611614396153_0.9565266824975815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.2e769e3c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/top-app-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-531ZPQM0+jD0OcymeOqAHMxGMi7nv4KoWydvM5xb1M4G58i8G8XnZVIwuSozE5WH1IbAQgssM+YSFmpb6al4JA==","shasum":"633719b0c35d23c98b67c18c77a3b95bcc2a845c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.2e769e3c.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1zwCRA9TVsSAnZWagAAzQQP/R8twYiUWLFIWJSMlsby\n+8fk0t4r5mE/KgzhDbG735X3pL0liZp2fkxtQcw3bIui1h54qTp0j9CkNEAK\nsxmEWnVjUGe/vJPzbjpRPjWriYWjebuW0afuOZEGoyIXINVKtEyrBNTz/j87\nBUshbT0vwhJfOrAfHP/VH/jxAdwVEDUwRqNK/+HlOp5URk9pGoZ2GI4JC34H\nq2QnE4b310OZy5D0TbZqAqhvcQ2+z5gVEKKVAFTKrCLzWWzDMEOo7QslGw2C\nPFK3as6JrGfCN2EsxZR7jH5NRY+J5TS2PAttRP6/kKotvM9T3GK+KroQlVwU\nqbI5nNeRPCF7fYSAlgRhuzQ+JS2aW/caxPqoOny+tiFIPw+0gOX793gBIycm\nzQlty1zbOGTPx/37eff2XP10dDs4l4GxDJoIag7CnhPKL+pzCKxAsDXJFPVF\ndNymooGxRYsIYFj/c5UCDXL+O0WbHYgj4jEdLHUt4ZfJv2fyDKddEhUnEHkH\nNhNZdOg/clM8xuI5QtNuRxpIe7qq1RxgSuS4U4d2sXuJ+GwsrPJSUxSFx3k4\n/L63tpva4m3R0mf1TlLXU7CROhMrhgyFAx078Y409SCPPViwAnhyidJ5volw\nFF1kBHe4K2fQx/qnQcRv5XJAtwsaK0lNypWUo+a2sKSEXYph5nRF8yajfUbe\ntYZp\r\n=MB7U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDwbtKrAnqf1fB3Ap90ahWsRM3u5pISvN9xzMHJTd6aBAiEAzMqoKLDzV9t4IL6PZ9bAPvjS8d9kxFTA3b+XyedrpXM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.2e769e3c.0_1611619568433_0.16627750401914398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.14e01610.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.14e01610.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-RHvGMW7GnN5LBrdYfmx6Rd8Q7lJbpenDVWpL1vUddXjgRdYLcYXbUR/fRVQjBRu4zEFdWvmUKtGfa1QqUwCtVA==","shasum":"1e372539b4afba6bea2f17f3cc93c1c9e986d9a3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.14e01610.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcQ3CRA9TVsSAnZWagAAZ+8P/j52PvQ8FdG/g79FbEPw\n7oJA0JaJQaOuaEVevS2ki2relIeX0debcJzz0deaG8pmt/p0BRAnSCDFpKmk\n8mi5PY3XhmBCw5hkMtvOnIJcnZw9EG4dd9UFOUCE4g7BETK7PxMn69jz6lpS\n0eWXHjyLZEFoH+a8Mpac1W3D5Tp/jxZLnaJxMoiH7B00MSYHJc1zcCqXT6kJ\nR7yog0HWt/QLyelLUD2KkllDFhU/0LP1P00PqscduJcWL4EEeThW63t9i8/2\nModYV575VAqE8exDnLuYdSdYoJuOiOOO32lFYcpof+wTxtfuhdkmUkc9LIcN\nA+vWuHplCQJPBeAGcLPaa8Q9n1Aqp3KO9Pk7er4PPoFq1L8inNF9OZRDFHGC\n+pf+a+5hXUk2jOQ94ddqUxIn5vNN/IBBw06a+sYTjoSdSZAN+/mqjrhuVFsw\n7q0xYMNFbAaJpcwsc0YrJqTBEY3pO+VqM35I17We8KZa9vz9MxZt6aVqTWZb\n3XcJpw1gzOBmjbvNlgIOda6t7Vq4x8Pnn1t7svUyyCErkhD8U67goib12BbP\nUd9avk+JjsGZuTJISxxdS9y9nxC6U1RyUq2XvlDKT0YIPqWjPEgEjwTFTPwn\nHMrBOLtjR4z7QkywvszGm9to7O0G6lezKVDSe0LBPFKtqWOM21wJXPh6PkJB\nEbhv\r\n=lG/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHw/hFmA4tTEecjgjjGE73+kgMeh0uRHbswU/c8cUp/MCIQCJMa1b/3CTYbd6F10xXL4xTyVLiEjKV2J8juon+Eg8AA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.14e01610.0_1611777078889_0.42687033561591026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.5de00c1b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xfa7wP3DOyKd9vinpZSIT2UEJRybDZ1+V6dUa3tZUcl4csUsEnZEvf5G5ACvGbxvvlTo553+uR4XLXCsdiOm0Q==","shasum":"95234234bfa0df5e6da6b6914fdde24424de357c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.5de00c1b.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEco7CRA9TVsSAnZWagAApyQP/2f4k19FkYCfdNQ4r5tY\nAF5n5GKwkqKdCXXgiM5GyM/PkbiMPyvS3gFWcc2z4PPzJvEnrZ3kjfybe8Y1\nUAPwIumLyDqZ+TjkwQIL6VWd8S66j+7LBhwB6BvSv8JsDOM3ConvRPSIno+C\nvrQv9OZzpcTCC+KhL/ECUGRdANpQTkkKNvTFobpsJR8CGmTybqZg0zhO7rVs\nsGcL6trjwIAqdfvxMR7dWzQm5WiUpXv75VDdmk6lQyEEbJGbvAZHaOzfB+CV\nG18LuYBlXoW5yR1fpEYDn5b8PUqmhXMQ0yiy2kcT+eUTkb4AXK/ak/jtaXw9\nX9Yx7ysBIb1emyvOVnHG37eIRFBTYTzwVuYXucMVO0tsXsLSkTW3uW/ra6ft\nF7P7b+H1YF8oZN6JMDsH+fLfRLadIZZ5CFyeQi3M86k5vllqW1Jd2DPbIu1d\nObtLVBCP82Q2kdgOW8e+gzwb/IR2iQiDjVmGDoY7SvJ8Ovd/oMUGsJgu4/8N\nElHCHlEDXq+flGDW4TapNDi1McL9hRnR8GL66rdczJx6XpUlyYU5pXNUvEyb\nDuyXHVXyXpkd6lh+j9IUl1mBNmOXukWORe4ebsaj5bqn7pexAYIf4k59c2lz\nmDXiwNRN/amikopGA9lCiEWZYW6fklgOpiBvUKu0d1wq+gaIhK55YP3Ljbal\n+CUP\r\n=Hue3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDITxHHuDt3QyRE+6E6p7XjF+cwHMm0NCZIJYHRqEHHwgIgBF24Lkl01U58K1fZy3j6rhrZV9/nc6CV/TrWFTsoPNg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.5de00c1b.0_1611778619402_0.1571098705786078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.5a328336.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5a328336.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-l5BfuCz10I9A1WtB9DLONy2SHiFvZEF/WfUYndlzAl69RfnjXY7Hp77t/O2+FhukIuSn0Td8vu+uRDUpDKZ9/A==","shasum":"dee987d7bf7bea76b4325967642a506fb47b39b1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.5a328336.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExZ3CRA9TVsSAnZWagAA8eEQAI5JW4cgat9BMn5AtTYD\n8AQNVmmb+zfv3TTe/bcYi2iB1tOxj6/LdW9Kd+rpocXZbdUfWgcqtxkY5HnT\neKTSCEijV+WnWToEZjqD5tIIFpn2jUMS3Ibexc/7ewNqYyE8cqxxkfjWt65Q\nvuyDIF076Wxnk1+vnOYq36NwPsPTYswbEf6RrVwRvfvh7N8j3PrPbga0UQNF\n5k7YZI/F3Z5R/prTkp4xLvGXYbFO6VYeswe1FWBXItXJEZHH1f/9ddKBe9ex\nnS985oSDPhvjhHSo1u//eS85CJWkV36MpoyhYsBFUZQX4XSuQc32wCFPgS7h\nH7LIxNaijdPwDGFfELoWhh1cZKGQdl4jnow0ywOVzPnXvTsSYyQolUWSKULt\n1oslOs8d1KwHqaWBjzYdVwmEJfWuk9/PMirCMsWf+8GoDug2raKhBPn/pM+j\na6lgzJY1gbjeOUbU9zGDb9tcIIDAMepEwzCP1AFFGNgecAYKd2FejMoMkJrg\ngw9J5If9H9I3zy/Xhtls7aW2IwCRGbfU7WKiSOiCk0ky/3hohif1BQCEFTYJ\nPchJkOj0RSgghUMozfiXNignNFvZs6u0V+GOOzFKgM857fPfPzeqZGP37SRS\nu/Y9EvOJqVi4rrS1ZlIa67ok9Enx5cUhrLUfUHZ4qg4mMhR5v9sPwEMqtxFD\njmW7\r\n=Ga/s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9XWvR/zIQtJBNtks6MI5J3nTUfQtCTQEEMt6qqGAa0QIhAJQlPtxW6WUELl2Ho6SRgKDFwiS+helOF4LKl2u/yGfG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.5a328336.0_1611863670800_0.941070371480714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.533b1251.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.533b1251.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Ny5eDIoB85MH1ZVCRZKPn2D2WmlqMxr0cwWnvIeKK6Gyqa3j9I+N9yxoyvSbIaK/VFfWSMvPH3UBUEVzXFRefQ==","shasum":"88a2cd9c053d38772ce06c0feb148a7dc8c8a2b0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.533b1251.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWiCRA9TVsSAnZWagAAUAMP/iVezkVuW166RllIRcIY\nP9KPR+UEZSJPZ8/1DmZ3foZADImDAYFDg2lazQw36YX0aYY4x57/DugZJG40\nsskRkiDPctghtKzbWZOPNvPLcA0dkXR9iQWMxxDsNOUwIGyqoblXuePf9wmj\n0xTB2ZiahRx43LxhK/NbwBq+MvSsHXhOKWOOmHN7kzumNY6WUTTZTYa+Jdog\nqgOmLV2Hu0kVwpeGLUmdTO2N9os8qFPBLsV2uLm6yD4AnmFVuJqhZit1oYR5\n/y+8My+y7Fq+Z6qYoaQlizwWcq/P1ja9C5fiAXQ0Hg1WeUDGTbOLdfvuPWVy\nvR0JJJdNK3lzYUxJ0DLT5f0lEsLgrlsWSmYdh31SfnGTvKT8bIgjpqEEIJQk\nYYzJml8DfXYYDH/oxM/fz6Uxy+I2dfCjzVfMNtx3ZRzrChsIiteWqWczw1QY\n+Ozm8ZExNOHkXwyVTu6dK0HL9m5nXI6YRPasUErKoIatSDnZXeY1HilSkXu/\nQzlCKmScflP1o8cRdKLs32zz4zVTUxnz2sepnlJ52cqArvw08Zut5EmZda0z\n3/YKwLRYY21AST7qsudlhyKwz3OCsqyRHQBUG4xfwDB8yb/60KWQXVhesy2v\nzwogDWoSk5XrlUqsCKCph6n6Daq2DRyXD1S9ettMrn15lScxrGhTF9Zv6oDc\nKVen\r\n=Oz8B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBG3ORHEe1tMMYZgNN3/lr7EvmWIpxlUi989M51Hor8NAiEAreg7urt3yhR86mKDvQjcyyTny1uymcB888GuI+wGqQY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.533b1251.0_1611933089542_0.13270558377825226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-5uqbRk1ni3GDzynwdoh0TdshEUlEqe/HhDs6A1/qfNrZVlCtSiJ+GJQ4KHNeIXqTfZyE9EOt0pg5pqvobn/BJw==","shasum":"9e3dba04e38f9e7ef7ad6bd1493078e7636e9c36","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.ab5c0a10.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNOCRA9TVsSAnZWagAAsYwP+wSf4icMW9MHLkUDiMku\nJlCrWIiG1r0Je7HpwXZCQqCpyLncsh4f3baMff8ifFXRtW+N1WHozgo9NL1o\nWT4lgPNb+Rg6DAEsKZL11S/c2fTlSG7/Ucy2d86XoigQlj/b9ygEmICisPDr\nUwB2E7UO3ov2XxbW4XtnALNmZk0KlgaSUvr43OUZYd4dELJePY3zGjWdk8cU\nU0qzxYQGYUDbkfST3iyfgh++tR81t+m0MxhY91Ehs0zJLkJ1IV8NA4FgJl4K\n+74ewAakWhTCQ26SKRG/8KSyNkQXmF0Zw0uV17ALpTCI0jW1leGLpfHRpgjC\nI16Ls6CHzYf32WOSdXM1ANP19J4eU/PsXXRegBaZFHCyVmEXWrI3ectVwEJQ\nLReG3uIrDWutVynV0mpIK5gm34IyUWcPFBqOXidZvghPksScVq8sv0K1eChW\n04/zRO/MFPcUb3FL1yTQcTu/FnoI13WZl6dwirekM7oRAoeHGstrEWOgMO1P\noC1tZ3a+hqFza5yQoSwEnkuV9jgNrE/4JPzxKtVmyHe2VSbEeuv77cx7FwY4\nUNvCarFcJqTmbQYT2iSnaWxP3jSk9HPmAUFlfk6kG2ZtWE8k0oRCdycOEnDX\nGZLn/aY7hASnlt+7rRCWIE229OUhrMYbDNcaVmFaUhqQXp443G/n5XhoX/LI\naBUo\r\n=hpLO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtE4B1ktkI2X3uFVVLJ/kxUCASBIm163zkdbUlpHbvbQIgXT4MkOc4+4ZZxA4xvJsEKA4tiF4znwk4MeA5/S/FxSc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.ab5c0a10.0_1612297037836_0.2689803829917594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.b7a40b27.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-AHdLbyyhIQE3PiJzk/hs6s+r2/5KKlgXt1JSJijDqpTstI6orPOaAZLGv3A4huq4hSVM+vQIzmE4pMbkgpm5dg==","shasum":"6daf1137d66e158c9d6f37a18b1e36fa5abec767","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.b7a40b27.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtICRA9TVsSAnZWagAAS4UP+gMLJrleiy+pmlvlxxCj\nNC5B5Ef6rE/Tcua9yQ2IDI8FAsE+lpSG5Cc3U97ONUXFUXWKJkCUGa6Rnbew\n02FS6j+FSEQceRQix2Ixs9UqSed5bZTpunY7Cwwm7aPAHl2aneU7UkBWq0CY\nRm6sjogiqLE52N/LzVXigwljKpWkBEgp1Pe+FuT/b99jxjeMhC6yDqbEyVid\nAmiVXavs67T1QUD+KnVS4iTZd1VLqvF63ppSXnqnCsvYjhuwtU59S4wajM9X\nSdfltMncW2mY5h5ZW+XO60gLnWZE2rjezxlbexOzbhnEfjvk95yuWtNycjsd\n/V/IRKUgjL5iHTClsXlrj5B45Z5DRtk+mtOtWnz4rWUS2Z3/6wO8nrusHdBn\nJPY62mW9RHSZikV4d5htsDEINuNONGSihiCtEEa79T8nwAtHlkbssKllTejL\nR5x3LyTtW67vjoSa0ThmhzqiCRk61xj2t6ypsMPKEcSvyryEXAmELIcs7axD\nlXjvHgOByYAxrdJ/EqNr7LhazyGeYoxaKz+aHcaWC0HkFR15CL6zZv/4JxHr\n32q5chAKqOOyJCPpBXnf/xvEXDJv0H9yX31WFaQEl8LGgjQeEBnDjALkcf7N\nxCXLIiLZrdDZbqdxpEsU+H+AUG/++g1qs5iRMd+tcV2HuwUCt2s0xsvqcy/6\nOGrF\r\n=wBm1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk+7V4eMtKeX5WSVcB6NraQ8VgQ4a0NgexW0MtENkLJwIhALL4YQczUnDOqSnv8atQrXcwX2iUsZ9DlaKAgZOQJ71y"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.b7a40b27.0_1612364616098_0.516402452842079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.0fdee204.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/top-app-bar":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=10.0.0-canary.8e66dbfee.0","@material/elevation":"=10.0.0-canary.8e66dbfee.0","@material/theme":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-r/BFeZ1cQK9x7+A8xhJjagxw8O6gQRRGHYotAzqGiafbzAwhitDuoLHppMMZ/uqTyoSdq0SGrPrymZFoDmPg2w==","shasum":"53d303b687251938adff0ab6da85fc2173950a79","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.0fdee204.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyUCRA9TVsSAnZWagAAHhcQAIVAt6oTVI67xRTOnxdr\nRzy1A+rQyXPXbotGIWUoCRwZneyGLldFx8/yeMOPJo0ro6fnGxF5KVRucJGg\nPdN1s6amg7FiR2DhsE2Y9h5w4j9sfyES2RFJsvIvyh98pV7AGNm6E0V/mCxp\nmMFNNJqklzAO2W1lnfeVqxILxfEnYFzoEXTZXo9yzUdjYj/VQHoqgWx6Ynzm\nHy8ltZQcsI6vI7qtLTYNYw22Jmh1IhkZgGLu+GupJQBNup3cTbclHsgybwk4\nin0SWrA8tblZBeVSAF+l3Sk/FBIC7DFcEsB8WTCtPr7EqA2qjyYejEqhvaXj\nGHz144bYgwmIqyIGdSlihEq408XGFunKDjDxylPs55iIdw7Mr3Yqg1VcPl3c\nLA1vZuji0Z7r8LRY8toIc4rvIcTrSEvHcgmb8ouWMCeJJw+bQTKU2pKICJ3I\niQZZNNbxChZy3naVLMnP+SqaUc020mMm3XyeXu51JRdG4XVnhAFQBLuXRJJj\nX0hyF4kW/bSn5mjQMnN7PNqreM5+m1sBenwQic2l0Wz6iqbjn7cDFmeXNBGd\n3ExVoIW/vcngf7cOuKviNPe6eWd09kJrNvkIQLcgScxhvVY7cQda0ywBfee2\ng9QflZjiTNUkjf2AzvTcnALbXPm92aBPFbofWkxapgacgalvMxfbVPqJ3krn\n+2Ey\r\n=utCF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCegZEhiSVfQiOlAlIlyrQklr8ezrnqn6B5BRJLil5ATAIgAlw+BtkHl9w6p/snDNf1HE8f1KqwkLGxAvTMO+o9rPc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.0fdee204.0_1612377235669_0.16570431657102191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.5160e548.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5160e548.0","@material/top-app-bar":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.b5227247d.0","@material/elevation":"=11.0.0-canary.b5227247d.0","@material/theme":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-4hH1XkVjiYgzc2r0VGOS/WwBRXvgAJ17GQyMB4Slg30DoVBS4h2GFOVg4HFSDqMsRpcNDSPVNqVNsQlLbtFVJg==","shasum":"c7dfbe51e08cad0e9e62d46d7b09f98e171743e8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.5160e548.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdnuCRA9TVsSAnZWagAAkYoQAJiar8aqtqOxqyerZxsc\n8ZQhFzgVrdXrjbH/kajx1fuhSO60IRkEHgkwXrg8a0TdHVskdyCd5Hmcw0n4\nd6wpwj9linL+M2TwiqfSLXpQjlXlVaw6JIPraWHPgTgWFrSVARHCUGT+hmk5\nbKM8qUcH99/C7VCwQHoPbO4xQCw/chDlDXXLHDXraVSlidN9uLuhyAt2lyTP\nomNK9HYo7OfP8yU5/mjfTZgv+f50y1ayCZy2haLkB7oW3+BuWJbCxC/phxBU\nanVw3HjI7j6KHuzOwX1Fs9Jcg4NqOCUhx+KGNj6DiobyXGqam64RAd9dYkMj\n1oFmlJQdhhKEqHoz0TD67cZRcBKHYAvmcoXzL+mrqSiLBs5jbZZxjZI6MVEM\nCGEQOoneYdIQ5jEU5SrJO/DfxA7wY3qByDA+DEakSqgM4a7m4rPEYnqma0Eh\nF8j5m4jLcCZu2vYTXmbj+2ief5jKJUlVjWQ5LHpX9GQCtMdMEmbKKmMHaiJt\nGVsdJDVGQSVodyk/NGV+4A6voW9fE9efbxBMk4kU7KMdcwpZXEzla8RiOfbu\nqKq2J69VOpbzQFZ2ppjUoziPLbapOi2v8Y7I24PbsVwp/gnJW1p217p5y8i1\nkcoBGdijb/TFXWBFIu0NVEYMFVnMdzFMZb8yd8mmLaaAiU7d71eFkGwUvkKH\nZ1DW\r\n=yK0g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDsrIXP8UhW4AJ8LkekgGvlh4dB4odlfi3TnhaOOUPxAiEAwuvMjUiesjXJpEqGE6kMiVUO4yM/R+VYUWZ3SqWpOpw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.5160e548.0_1612569069554_0.83032081017216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.4fa2daec.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/top-app-bar":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.aac8f5d9a.0","@material/elevation":"=11.0.0-canary.aac8f5d9a.0","@material/theme":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-brKxBxup0kR3trJ5RtqjPK9ap1GI18K+eKppjx/VBKLB92SSsPDPhn9zI61lE3Cf0K6FkcwdNDy1gdnuHEIsTA==","shasum":"01ad590bde834d0a94c1a0a9ac47b6a3d758c8c5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.4fa2daec.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTVCRA9TVsSAnZWagAAPqgP/0XaLvuwAeHnqOeuX7z8\nt/p76BzyV63OAFvTONk6k6lUmhU/ZqudYJMgDmL3Wf8x0sYxg+ALd4nU06Dp\nEgATOTPw7ip+cRxwoTB3zbQPOvAhavHIJH8mbQPprWFQ/foMOkXtHkdSDvm2\ntuHRtLWWo/mnruuJDo31HchaxbUWn5q6/B5oh8QyLKr6YByZzUEC5rFQF0bx\n2fRvVwm9YqjVhROhGRYGA83IbTP1d5kb03rF1YDkIhEmS1oWX+7zO3cExfWT\nan3Zearq7GBcztqitVqvmlTw/waN+9UtaGI0ndxHPCJKWBpUmGoVOpNfo4lT\nGXSdjhyGpu4BAkXEmClB9w8OIqdooDUl8kQBOg8yzPPeYby0ej1JMZu2W4l6\nq2QCei1Eriwnp5GBubmnI79R+9A2oO4sWA8F55ZC7Z/+OdvNkaW8DhXubbNK\n+NG05DldYlY8o2gLFd0wHW/hzSrdEQ/IkXAQp+9bn0hmIh/F5DtEKNQ/mgsD\nvSV3ZwxrdvxajrB1rsmxWx5RrK7VuPI4v3dd963Q8k63T0G5ZNkIlIuey5jY\nEq31nhI6XvsAwcJV15jTJ+eijauAETgSt60Cog8CFsVDcSRvT2gCJTrupp+J\nzOoabxhiP4jC56QXWjGmB9WFcb3MUcT2ztsGUsGStDK2z6Nwpl+UE1bc38/X\nJ+6y\r\n=wybE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaQeCDbAhASDJ570dhEA9WcfgHrdVyE7XWU3Z30UwzMAIhAM8rQGJC6UejloxTnBIYhmydEG4qcnkafZn7d5CWIv0c"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.4fa2daec.0_1612829908902_0.8514419709243082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.67f285fb.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/top-app-bar":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.750e18fc7.0","@material/elevation":"=11.0.0-canary.750e18fc7.0","@material/theme":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Dddk127oUkU41BjAZX2gC9OajCiphctQLY9pKcNilAU/Nqq2FGsAlnCeBQ/YK+DH4Z7YfC0TzBlIRpnRS0cxRw==","shasum":"bac6217c51ed332e16b0b6d2155af37d1798e27a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.67f285fb.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdxvCRA9TVsSAnZWagAA2KcP/2XqfocOaJyzFkMgyIL6\nHpIF2Hb9tw2iBhWM6CXq+AAULeFqG04v2Pyj3jj48XtmwX++jtEhwx2xcL8o\nNLMyz6NgfGca1Q2PiCVryVYavH2MnFvNpTizfL+TplXVJGE15fn4TFFgxkG2\nvrNumfzl/joco1L1Bnhmbef8ZE1D7h73xblj7FEZULgu2tmTKAyXGCvAM9jW\ntyJszA5FLMvdCLtHGtczASv6G/hKomnIMlRMPfutM4iCM9RyrbBmRkzp+GYr\nMFr0Qsr3eYYj/yc1VdBy9R9AveDzDwSQm/8hXdwrHRdxgjiX8YBSh8kg1Q3H\nY0o41kSVT40Jvs4ZBkAvZEzRJuBxsS8Njfd4/TZDjdlN5S90aEC2UfYayFbS\njKOTjozDcoaHVCHlCbHaXt1jfZQr5DWY8yNJfd5rJHV7p64MTM0KOrKLTp34\nS/zkYCNlV75JKFP7bobX+0boARSVHzdeYzyqwDTIo2HnWvC3q5fxkqgklk7e\nPmjZYN1xNHqdz5IspqtvAmpsAXT9qMddj2QgLin8zWZMb0TBFFi1pJcrsCDS\n8u6ZL6VjmPDtu80/QbH2uusGI9NvEj6W9ROLkNr/iKszXrcGpHkbuyclzmII\nkd7jHfAN+c21ab5H9bpuAJ73OWkQPDVSbDnYOR72qmdVmWzOQwIElCy576Q6\ne7Lf\r\n=jeGs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZHYnELrXo8vVP2j2fdr/bnyr225RGsugJr1J7JENH/AiAWZ+v+rFjVAAIwpELFvvsRmsxLzJ5wHGjT4w7dZKXsjA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.67f285fb.0_1612831855281_0.9049125089536325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.58cd5a70.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/top-app-bar":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.b62b1266d.0","@material/elevation":"=11.0.0-canary.b62b1266d.0","@material/theme":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-HMK2UkBGgfOqO4DgRe5OAb16GufNsmDsGmEKYqrIHCQApTysLXopyXh1v5KVxpgovnoaCxE2bBep5q/t0ca1fw==","shasum":"e6345a27d15d19de014e2dcc1ccf67faeb96c1dc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.58cd5a70.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZc0CRA9TVsSAnZWagAAzPkP/13ZiPxQyaJ7tuiG70Lt\nk+8g218zkHSjPd0tq/7cMKL06Ua4zdUY3bl9UH6GZ6P2T+axJUxAKPbxyHt3\nJiGOCeqVNZ5/yVYkXEjyWTXUW84yBmwo9KJpgu0vXe5oe/eHqL5JKDgpdHzo\nBGv0evjWqKd6XreDyjdAIQfH8KG/onUdMQmkhbuQt9SY+fohTnsEn4tFjfug\niCtyy/TgyioGo/WUXgzHybs8cIcecQ6ZRwpEsDLBvQfx6/cighTuSpWR3CAT\n09CaipZIzq9ijuMrwk225gxQjZ90HqQxxLfZRtmgHzrQdAIJFvxNCWyHnbxw\n52l8goubMzO1BFDCywxEHxaP2i5aLgrpYwUnHuN0XQPmU4PceS/TQiS3UqSf\n1dBTEc4J/Bj1T0aDLj/da5GAytTBSW8G+eei1MzoMuFqfuCoAAjC5xJS9Rrr\n9wzA20GiikdMiGXdOY3EgYmVIBy+pOOV8UIfKIzJ2a2XH7iUDz2tqfE3ROJX\npN4/gAbnwb3HiP+pb8XpAtONt2ebK6GxmM1x64fk5pCulOeHOg1+bHUA+BVI\nImVgE+2A0SU/XJX/kdCkv4MEKLzvPC73Z/C+qcJ9kG63ZO28xG6FTNiw7z5K\n5SE/u6z3dtn76HPEsCSabv0495V+57t1jzkVGXhkeUdcAqTkaWr1Ro5lWq6k\nKwhp\r\n=sNL3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8NwEi0ES7goqslF5+99UI/mA0lcDowk5yzGLx7YxkEgIhANoDPDQdGXpcbvWdAbGnCFAUhMJTKzjm4HaXEgiiMtZS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.58cd5a70.0_1613076276188_0.09266782877311552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.8107ca43.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/top-app-bar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.a6b3101fb.0","@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-mPOI+ph1KpX1OKBDmBsvj/hDZAducRErx0TsBCPq+Gg0QGM4zn66N21FbsDw7hbzGU5FoODV4fpuqIl8zX7gRg==","shasum":"4b24a99efb885e47554c647adbf3c3d7968324a7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.8107ca43.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb2xCRA9TVsSAnZWagAAj/UQAKS/+sGbzbNDO9J8h8i2\nxdtuXIZpCbotqjH3QDyK2s3fMVhZmhETeAgGYWlf+CDjvxfEYDe+rRVXi7ix\ne6RmsgaTd8xxe0VU3IcNvMC+1Ou1WQEMUPKrXufIYL084nioa+4A7NLk2A+p\naQpiTk+16Ar2xodgFMd49fvcPaxxBnMnHU3BdCh9L+u3/7mwF/7NPwjVZkX/\nvrU/L42M3Nj+LF7BbAOuqCh+D2vMdPf1Ljv5WYddEOBTs1yoeufODu1uLId7\nUjrNkvfoaX304TnEczWWOIHzEsarY6y1FEIfbPEULtBmrKXh5V/6TA7QydUm\n0njn0Nsc3h03nzTRbTDFc/RYSdV5irLeMkAAZFqCoqeMO0gpoKZuhfc2HREy\nPnrhXaLrf15U3zw6YznkJeX/2hsryeQs7cFYOAfM3fvmrmvgyhmloAIrRYIA\npyO/oL2GzV1BFgg79QCGMTB5XoSHxpikkxPDnN3S6dl+gILvr8DIaF2DLm6t\nWoqC06FnWTC368DGxi3/eJzKbKng1lZSkmriF7azPuS6nx3wCDMCKnGcO8br\nKddmACTnauGIuFq73DdOohKf5veBdDQmsB/kl6yFXaPuZZWDjBBWkKtFZLo1\nYnzOGpIOrfE8C4zv3YtkTuk21pupQf1TZBoPhANf4MAdGDHoRsUr5KMhFd+n\nhEea\r\n=sCJv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH3ENA0L0bPmkseecWpRIzDalWu5BIdFj1PjYDzhBlIAIhAMlcY7jdH/h77K5cu++VpJUiSHWSwGasnkbZcdOQStQG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.8107ca43.0_1613086129529_0.622240563643732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.d35d64ef.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/top-app-bar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.a6b3101fb.0","@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-hiuQ+XYWzFFb4eF5X/Aer3Bsc0Mkt9C/phsGBRH5bNRmXCO9haYb8J6WIH6/LeYng9v/FqsBYz2jaVxdTb0Efw==","shasum":"a94bf0fe17e5f749d5f6f0ce9aa724a5182fd73c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.d35d64ef.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEACRA9TVsSAnZWagAA0oUQAIGz/V0yBwZdUw+vyFRX\nGkTmk9JCjjkJs9ijr94jV25J1BLqeG1B1mlWAgyfAN0QXq0bRG84ic4snqwk\nzMUvSg6qhmdc2Riy+C6G+GFBPgn+ZTgtCnNbs9+uMtUk+ulyqyjcYZCGDIb/\n/19+amchte+Ne/QB6pnuloyG6XhvQurWN9Hn0ntYbLM8zonr9iimvcUG5Xtr\nLd1e/GT1D+ZIdjNR3fDsNDpwNta0xn4jAC2XR6rXOy4D+i3netjK5b7rFZhj\n8tPMkkN4Aej0uvjhNc3n3dDYm4sIBKdOAIMq0aA6Ckk7zHCf6BWJw4JibSKa\nNU5cZ2z3pxEw4yVTIEoYrkBxVR8hMbTHWDL6HCaTrMr2DW93lMA35mfKXQKY\nycWYFNgSMnjBWwGw2Egu1+8uvRWspttlpFad1Oxn3a2sL0VwcZYWzT4g0ThK\nEUC5PCJYP8jf+AdEv1FWXcAqH1uCeONkDzd4Itl+cR52/HhtQekYCr+4C5hF\n27vdRYTBOHw6cFXjRU7O9elxw03mg/oDbRAwl4cohj9vPx4XTQ4LTbFcywfd\nMgdY02L5spMRX77+AUDP+dMKIBvNWBnmNRD26nozu/hPdVjWe3YK7cQCAnac\nKbGZArdGaVU03OrAyoErzvqxHdbeG5BeiWGvgE20xUp8Mjhw/V/pxuN2vOl1\no1i7\r\n=1AN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB9bdkZgFKm7wJwoyNc04Ccm9fWcZtP3BSWkze8+e44gIhAJrGgcl89n/OKzp74LQQBNH+dbDNs0CBUDycXZqzvPmG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.d35d64ef.0_1613086975956_0.430366517543991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.78bcf058.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/top-app-bar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.a6b3101fb.0","@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-orFCtOZKJHQxi6xkFe07+iOb90gfwhKN6DFNOy1r0azxYkKArWjf/2wb4Vd3huAPaprjSwlsNB16UPT/IEy9Mw==","shasum":"07d5d33e261e25cab7342cd8b92767f1fedff726","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.78bcf058.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBOCRA9TVsSAnZWagAA/8IP/26E82qNBCrV2brzubrm\nZ5uTGc9ZiqtWXpmkDmhuhqCObqyAUxPZCjN5zId5SlvkbTI+NT6MeqHI5SVd\nqraOMtZRkEPtx0jbDHe8VLEHjZIRUR0xD0BOj97R5rZev0h48p/KLEA+ZkWw\njD1LaUAeGtTVYNbJQgt63L8fDjYgY/4MfarhTlSCc31O/atbMShIMkbZI1dl\nozfPK8ndPBUIJfyLpmiKXpCctiEV8STZLErsvNTdzPIZg+mxaYIOmAzpTIly\nDDnGMxOVidVZLMK/yGq+ZeVGvbv0lOOiWWci58ENy0rIC6/z73PH3ewAdNlo\nWSdYynujG7fSBnZN0/BjGj0mEdPRR+0Jcf7jBUZqBOxq8bAKJi2CFrCVCO+M\n0D3Mr/0CWH8OOfnn/ho9x/rsk7lF0gmmwcwCmfdaiWsQTW3VIi4+bPO+vGb5\nBRKEySla8BfJShYPUsIzRLQNqzCQMS/6jSR9QxzEfSSW1NRga3uu2oZVRu7K\niuVT4IkCYW0JHJEQaLMLuWp3wkVcCaHocGB21/jX5sT5PmJQ7OQgHlSIvNk/\nbivFkx/+I8lw+G+bVK4jzqx68OWHtrYCUGcb5vLaLLuXwlK4IgjApUtK7TmI\nmXD6BnFWsGrbcrzJOvFlHw2K4ML9xdJFVGGxiLg7YEzr9KnymZJTsl2ie6Ll\npe77\r\n=yb/w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7v0z1eC7Rt8xxOHPDw+UbCGW6XFOVyFjtGFa35pB2XwIgGwDjarXElnbeqslyjJsuaN9EwDY+/+LMl1B339sEOEg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.78bcf058.0_1613090894011_0.19543877989718061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.0c6908fd.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/top-app-bar":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.ed88df700.0","@material/elevation":"=11.0.0-canary.ed88df700.0","@material/theme":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-67NE7IoPttE+PIy3Rr0S8hLQ7aGbjs++sXq7DtJ03F+qHuJNo2cDWAvziEsoqqE0qTVXO7flqnIGT6NYYwcj3g==","shasum":"f893910e9b8b4cd739fd5faf30029c6faf2dc166","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.0c6908fd.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjaCRA9TVsSAnZWagAA23UQAIgDiE9AhPUsx8zSjepN\nEqXX2rI+IExvGZImdvZqo06hCRWNfUaupJhQ331OhyIWB3ZwshTTus3C9swY\nvecjqn7cRwVRJoJfWO2x8FFyf6TYdll/chA59AdrZ6WBoeRMzVfxX1ulZMcV\nKW1EWWSX3UYEAtmRJloXwL3cGlJ8RlVxMvcL8O3AfwtLeY06REEAqI/Dv8Ts\nicI6LRdzkiBGuy9avUk2kyRgCFogKi1AfTKFPiGLirR9v2JjsqbZvQe/Hs4X\nwtLuPH80m2iC+HPcRVJAUQ7Z4cgzV4nuCHhaTzpeaW1+VVGk/FhUZLIltuo+\nhstpBfesC7e92MgoTtEeFn4pc9bfsnpzC1UqxARSUdXgyn7nUvNirRoVkigS\ndF+TImgURECFwGhXMvwQo6I8y+m0QEoZAawPIiLmbi6TJWnOTuMLNZfSubmo\ngWdxvurDVEbU41in2M33/4ADAhR5nIsS/oQDjRUB8ytrSd3Uk/zmdJrtcWXv\ncEXe+MXZzUC3UwuhFwjEUCADudAw3BBOc835KR+pZ+S7bD6cif9xhzrFbU8h\nsxVYHTjBOF+8J2vO91hCZSx07IXLhvPNahh5ddcIbq25zY86fkwOHju7i1dr\nbVpvGcAaFUY1UNDZ6JcrWd3RI42sQ080o6I6P8u3MgClsA+zWkTWWsUauPmr\no7B8\r\n=xpnS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLaeubtTHB7ANMUrEHHzdxCsQDnygstpVlxSIyYU1skAIgN3pvVT55prxUyIvGy76zwabssyfUYTppSBvS1XdgG7s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.0c6908fd.0_1613093081622_0.17993321103595372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/top-app-bar":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.71fe9a067.0","@material/elevation":"=11.0.0-canary.71fe9a067.0","@material/theme":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-zGqELnjrZTiCFlOPmf4n/6YH5pe0z9Fpk17/gGA3TboM8pM9uSi1ecQ0nuwer10dCsICDmqdeH/aORZs/n5lrA==","shasum":"4005072c0dabd34ee8261b33a50a310551fcf836","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.f1f34ee0.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuJ0CRA9TVsSAnZWagAA6YMP/1zmyQVbwvr7CFV0DtfU\n6bSj2jt5nX/nb7y8i08FtnUEPqn5I2HWWpPIFo+S2FLgTstlBJUHJAwpvryS\nWSjym95D05y4Mb5iGpJw5vfyDpiakXIRKR7LmC/8csbzjS9KDT4x8IubX0mi\nO/7Uff0nJin0GU6cUm8Wa06ITJe8wpVxRlmFTH9PBrif/OgqVtbcA0HNUIhs\n8y5YyPsxoa6ZM6IHjzKXu5nvKwAMbcCoJOITyNeoNmAoblOckn0o3hGy4VEU\nQFdN3GIrqmoKaIpCGQDopEIZ8hjdiboJsSyl1cBPgWdlInMG+zVTFdDBMiFJ\nDgnwlCdCKvGteTo91O4rxHQh88DFxnzoQBCk3fq6TbQVkS64GmnEk8pu2bmW\nwFmY/ZkRmfV43aMuXxxrCUQFaKuEmAJ0aCZ7UXFkIIJP59R5QSy2/Z3XAsbh\nEwX8QU0CAknx7pJotfDJSVYCtP8UbUYuPPFJZikF69nbjZ6H92NFvH8kPN/Z\nAJUrF+Nd0ngsODBKxux7yCPdj/FJPYd8Kh8Uo6yrYnVs/uJrPqk9zoKUv2Qb\nLfkq9eJSURdO72ZMqSJjyPU+hER6ad7duL2S2d8minkgBrA4fXpO38COoCYm\nWaNk9mvMzYZKldRBbiZCfjo6c5Yx1F58pDrKEwCsXxYc0UI+lL7ya2byBLiW\nGIfO\r\n=rcTj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFoKJj5VtfPwGszBCdI+3a+vxeYlxfCsOCyuG4dI6sTyAiEAvXFMu70CnKLp8PoTr28fFXz1+qimQQEU1mrMSyK/38c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.f1f34ee0.0_1613161075896_0.22315231039762606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.d84df029.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d84df029.0","@material/top-app-bar":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0fd56a86b.0","@material/elevation":"=11.0.0-canary.0fd56a86b.0","@material/theme":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-jBYM7sK5Z+pofM+jA+AsEmoR1DVC8r784e0ESBW4wcZRoS5JrMThauf6NxnYP0gr2BUSDeAhSaVUdjRfZsUlOg==","shasum":"650e86c111c1a71183cf4dc34973dc9e132bc0ba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.d84df029.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBgGCRA9TVsSAnZWagAASMUQAIv2Y81oCjJQ6TWuhy78\nZqoSXSrvxJ8BYejA2Lz4QiaqkMAULLtjbvi/voTYWupU+2fjKRFA1tw4LbT6\n63uRkhDxjPRkwVXXRKwKcmGKVSWboFDc4v47jdXWus3DyIs9JAeRCu1bQm0l\nomtk0/F0b2j2IXM49qjZ+O5rOBSg/F1LH8VA7xoC5Sba/+DiSEppk0hv0V8i\nNKaG2jDRmU2298vNvjzOhcrNaVUJnqC55eiT/OD4ol0DHMeHoy62WNiSPggP\nazsR70811GXzlvYwzyrZzGVk0cUtlztgldv8wc+Vsl8uPlZi62jx0FBKHw0b\nhuHgegOlvpTqTBrVHuNv1bFseAQ/QWgduNUoEBSc4egdOy24j6lWsjWLV0UL\nMlA6TrdkPZWvNMIXS3CrKHaAqRx0CBdrHLOAgOOG031XmemfJuOhpAE4vHop\n/k2SwTSPVThtcLlguXZweVmt4AA5G0tBlf/IwnacT0cSt3jHTG+PWToapHYX\nnMQfPJkcbHaQhK8o9Pxpr0sAnXE7/msTtyOK1vZQH1qkgI1RspUxgo8evmSQ\nafxVL0wz4p4p5vgw+rUBCVoymv3nrooCQieDNV2C/ljMjJ5e0Y+hARtFvFqb\nu8anrg8cv5Ei6/3g8Hm8gf9cCR2NeC5vS9VuanQSbsT3WZm4lsaWqRoYMx4P\nUrG4\r\n=d9Wm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCT6SoGMb642QTwDpLCy/R309xQxosTLIk9XerJX0/btQIgS6o3CgGbzHVFlq8PlmWENzJT6JL+Btvt0gMGQP3f+tI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.d84df029.0_1613502470040_0.15982862905743378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.c525f471.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c525f471.0","@material/top-app-bar":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.f9cac96cc.0","@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-2L0yUcD90iqZFUijWhhPoHBLfaK0MvxmvqFG80qQU0mKDQLaPf8tOU44g7h3XPxPHDKBhvybl2wII2Rnk6SdWw==","shasum":"c6b0d3b3749f07c7308bf1790a503573d165ee98","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.c525f471.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJACRA9TVsSAnZWagAA2FUP+wWuZAVqnlA20V4QwCSa\n3lsq/RZuqBo5flzQ7C6nkJIWAsY71CqrHoqwVigkfgjwx9fahBHAvn/9itSU\n9xB0yFyrLxWB+pXnYTjT3QYXpRe++qbkwjwlXC3K/qFuiaY4B1d5H/V3w4Yc\nnp3IUWvwLK6a5wcgvUfyA7bt9aoCu6uwVHXwUeLSiGEtJVfUNvkWrjQQLkNe\n3deqgm/dc/k3tW7vLM3B454Jwz6x4Ey/zVDqOQUY96p0XjzsW7UxioHEQYOE\nsGuqWlVZZxm0fWEDeCtp/e/CwfbkmkYAFYgTqcQWfX05CBAm2tipjsc0e1rD\noaBEPpRdetf88O0bM17v0LPH6c/2vDz6CUU2JIUkn/fbeGWhWltDgi/o9eKz\nf0KVSQ8BdfQvQVg2i1EaUZt1fXa2lMFBS4FGmne8ehm60wUEOArYDvDmnb9F\nKaGn2/os34FK6L9mZ7mgdQGiGSqf6X6RUYCC3N4eMj6c9P5QrxHLcCMNKo1t\nd7yY29dcNszHyTb9jOrllw9BV35j9u27vzN/HbJoa46dGxZq7gC9hHGcduU/\ntt1kXNtnU73X6zKVDclgeGSWVRCjWemwuiEZ5wWg45f2KRq2TfnJCHojWH+h\nFPK9u3B9iBf0WCx9YQQyUnVknSxeTflwVq8xSaoKM36mCxSEIwWj/jfOeFqV\n/aQ7\r\n=K+Yx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvbwCAbGiv9W6g21cIiCpxLwwsXm59mHDU2sbHPW7YVAiAX4oinBw1Nq0sWCfJXCXEgKJzI+Bx30lak9++t50t9QA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.c525f471.0_1613595199586_0.979460066189165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/top-app-bar":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.f9cac96cc.0","@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Lqfdk5dHxNWPnLaL9YkaqJHFvRsuU/pjCoBxo03zzvzmukdUK/qD3sCxgnW2Cy1gg9ul71cXINsF++34QAVReA==","shasum":"918c14d0e946f9950bd3bf5d111c7efb79445f52","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.ba7a1b35.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwK7CRA9TVsSAnZWagAAxEgP/RMjAPKkQkdRQlHr3yza\nLVQELr9vylnCnsiNgxzhFvExsiuxeDoiGX4GLhjA9Wgw/eBWbzGfixcJm5Cq\nYID90iAspLxY6XDiETyT6n7X31sH5e3XN4NfjFhEKV/0UZ1e2YpvkyYh3ZLt\nHGdHgkrGBzNYF9RYT7a8j8bWZQaGUlns9cOvMojTPHuyAyvyR7BqYvAYe/H3\n5qgq1XHfSc6toAiEDvl/Tm/eZijWQFaSxQWGet8WFJz/UirvH9gLz1jJM9qQ\netQ+v90vOUSeM1uZpx6jsAFxpjHny+/GOi06MIBOcGSSgbWlhkj9WYnfJBy4\nU0oqbzfxvuDIw3+1ZNtwrPp/W1+WTilqS5BG2ECgrPV+v721gK7SRo0EtFf9\n9O1zMhBD95HJFobW73PHC3BCEp7dNFWWxwh++azPPgeCGrAk+y/Auwgz2aqK\ntCeDwkTNCKfkkuXhmVQ4GvuRsV/4HjZPQMf8mEQ+5yy5MblOnRfNJxWhwBop\nVlVYtQW8+DnmPiWMzoORK8fNTrv9kbed6QPt9PueSGYcffXFSPfgOpKxef8r\nX3/DKQvu4lt4PcUYs3AyR43NJkiJ9GBXMWZ/uY8fBG9I1Rf1j/s43mQArKbN\nDwGfrfVEAWHdnfQC6GX78B0H00n8oS/nP6/8VN+jPzdflLHJmgsHHwTRAjgX\nIJSt\r\n=oXlM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkaXElZShQHUEe+SifaH2lhk0UTmnjqyfc1TelPrPAPAiBOiBIukbbwf2ATesYifqxVUgoiSURJtb0OPaZyPmrzvw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.ba7a1b35.0_1613693627236_0.9440162057255856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.9a566dda.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-aaUJstLocBlvrfcmcDFezVeC/2CxvUDTTz3XSmLpj4QQDSf/6nz/LxR8FhHBkNiozFGZJpNnuiddylTNBDQ+mg==","shasum":"62e7ebd69dd3880ada2bbe1d7c21f6e1d3321e8e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.9a566dda.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWCCRA9TVsSAnZWagAAnx8P+wS1VebmnCFEfADB/Gdn\nxH6xbd92GQbL+unWhjax2+EwJ4291F0NCEtiKdvJSwq8ONkhVWPWRVX1gonX\ny7A9nx6z+y1UoIAitejOF54/hJwsm1LBQBGLZRhB3fsOqcm+/RC/9SXiC93F\n65mfEGb8/1GQnRf+J6ampUKS6HJrE99K8CyCyKjFyC1lYRt6FmjqLUryR7PZ\norNrgJfDSXxhETtucfAC5GiFQ8dUTOZKpfH+jPfdFNiTguxx+wPTsW8Tm7sx\nWul+/lU8ZO6jJXnOgzRahXJeruPLDSBvZmTD7dropt2NL6LlI9yqgmVQfluI\nsWGxGzrkxvM6sKOQDC4Pp3YDrQFKMFe0jPa0ib4b9ImXQX03BqFb5CgRXqFj\nio8jE0rf78t+XivT93XF5l0N/h6WSYYc+P7qJOt8IQy5OQBlA474juLQsPEl\nhgMBO2XC5ejBzteBQ8NLnvlGniWHcthSadmUF6qyVD2V9/6abtXCjWF0CYG1\n+foGr0XpEGn/XuDuYdi4U27GhmPhrN63702eagwxiKms8Bgzray9/fd1cWLy\n5ZTKXJNkDqPgK3YS5NRfaZafbOp7AWl61efpG3EhiStqzRu+UOuxRcQg6Ekr\nV3SG4CpU7HczSC/ucESPQKdKz72yZcNcAjo16qmrIFxWBAUNBJObTm849xSO\nhPw0\r\n=YjP8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyCkIcSawr+VzZj2AM8NkSSjm55ct0aTWk5qODmiIn/AiBUDbvw32zpYs50Sec2ncyoqm5fMwgh+q5MQ/PZ7Pp4eA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.9a566dda.0_1613759873539_0.015024426125767487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.55addb8c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-xjQTbxW1Qo4BK1pHg0G8cvhgNngDXZfC2Ig8XNr+ctENC270ovNW0KRsUYOm72trX2AIWmPDnCD+GHGTgKYbDA==","shasum":"063838b82396161ef50705c437bdb8b2bd3d7897","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.55addb8c.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVgCRA9TVsSAnZWagAA0h4P/3Zwf42/iMWD7bVlOfpb\n+0vN3nBs7ihjhCI4CPuDIL7Ua3G1gk1j1kK5oAWBHpjfzXgAFnNhfoAYX244\nRnyNYfT9sVAkdtaU3K1aWUjNBLZgSoTOsCtp4kleYpLW6yoKU0Qum33o+6Kw\nQcGsfGHChxmtGV4VpzyS7VO+aYFZzMkn6B8Zyx4CL8sHi/L26KmlTDWU4Hh0\nDv86U3PuqVMI4l2PaVAEW7y1PtAvaaYRUa/qhyyyMEpROgwZ6yt7GvfAuy89\nRNENiRlMtMHNjSlomltmhRlnHxmkMHMgfgitILYDi+4niyFXsTYQXxxoKqv0\nKcDcR9nTQYDQvK5ohJ0w2SMh2irMMPuBk7aGi+RX2ipODuaDeacrk+GNMd1b\no8uVabz+f9nZWRC0rm9pg7hTEO/K5ApPC6nKSVw2PzD5/9zpOc3wkDRYu6ci\nyPpewqzr8UbQUE16XhCaSGMICpH1lAkFST82SdZSjigA5O82OHgfU4buZQQM\n/9XcBDExlWOY/BOOXXVYkC8MZSWeMhUjueh0mbM6U0nS5klQ3pLI+IQY18pa\n4cjEgP+8RW2xCTgyIQQ/0CtUZ86ZIlomljs6sgaRbn3v6nx/MhuqNgJn4yfy\ncq4/YA2/4roZ+6uDg6JktOwibN0aMpIvW3AkrVA2cglQ1FSqXf/41EPBGnWv\nNcEc\r\n=aXEV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGUe2JKf+5XYSSqBZAGTfpicBySU/7MpjUA8rvs9on3QIgZrQ1kiKQZN9ZAY/Dz36iX6kzYrATritcz7z4j/8Bmf0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.55addb8c.0_1613772128107_0.6803546350636906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-OOmMZocfAKCnMTtX3UR7kShfsGc4jHexvNMyDZ1uS07DMyxk+EoyDM/jVJ50ANeBSylQ5kVjXtBaU/0g4cVE9Q==","shasum":"297e961c0ef2456010941884d7d25599260cdeca","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.85dd5e9b.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYaCRA9TVsSAnZWagAAsDQQAKMeE/0rVl331CdpNrBF\nvryLT39h19UpObWLLj6tJ9896XXf6fc2QbH6pKWMRmU8v28yijm7HUhslWsa\n7PfkGsMNRMUjaxixpXNU3+iEe6Rf+AUsdGkzFEt5bgUKGg7n3cekfmoeeMKf\ntX+HB5BLdWhR6Q7IAWR+FxZ3HE2Ztl+Ll4y/6+Gfn4wp9xuBaiP/lnycH3UY\nMuADCixME2RzCwS9n6jCeGZRX9VFGEIWs/SeXxqJG7cHEFfL+Z2lAJsaC2bS\nkdTt/BqBxLTgP/Z5ns/nfvrCbr/yTiiqpm+ENvP6wR3cUAq9luSidaojh/m8\nGKNwKjH3c1/YGvzRv+sC4WCCvx53dc4vQzdP3mf6lK7QUwjuzHPhpUQs1twT\n6x9Fcta1debsAEETakxDILKHq/X10OOoFd9ymw1omXGhx9eHYh2+DQfx/nJp\nxLcgVnV0iru4oTm1MfIuT2cquW4v1YfJ68o0YrklGOsRETwbF9SNGGr0F3iW\nYEh7SuG9Uff8k+hI0CLvWxIYx0qwfqhju3c8T0InjT5Ynxr+dMHtQjZ3UdsI\nQE6OZMAQuccg6vlAfXX30jkSiXxmsJpgjsj/2p+RmZscJDRZKNOzuROMBPbG\nI+8AoGbpL7ZfHBxcOEQPNd3uoMWxl3PoKOEb34Mw7tuVsRLCzmifta5JrLVu\nXwbi\r\n=kswm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtdclhkLsvzsdJrqXPVQaGBB+fcJAFyH2uO9Gc84CQNQIgOVMnc0AIySJIaJIKj6NjAZyYf+ax88Wyio5n/QxRLLs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.85dd5e9b.0_1614046746063_0.9205741583561844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.aa3e078e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-iayW/iZ9JX5lN+JRQAptNglrI+nG+8Dq3cZ3be+oXm++kIF5AJbbGxl2S0213E8tUXR6D7R+V8N4gfk/i8cQcQ==","shasum":"80eaf5131236fbd11d42870eb01d5999600988b8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.aa3e078e.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgJCRA9TVsSAnZWagAArr8P/1FXKhI8VwgSCzJfuaKk\nH8n43t1wT9tIYDuGjPDj5ClPyqniK+UvAYxibiHn0yb91zy7eU1xYwMqZHAl\n+aozF2pbu8hNj/Db6h0F7yZh2w28lUmrU/nDr9135mpw/d5veuE/Wpetky5f\nwFw+s2kaN13HmGR0xO6Kkv0uj2MxmlKRPd+JyvpqvRZe6/ZorOKflgRFWVRB\nIxnZ+wbhm8RArQy+hoXjfpzuOgvlpwtcY/jGvbECIHX/t9rEuhQsYz0EK8IE\nfqCMvMlGoxiXLZYweF1TcOn9EAI1s2uFFj68lx6+kSTYbqdeQK9LRmnyENCC\n+GbqLvgZVD26TMdGEpdLhnMnDbRp/N3qnm2OJ1yLIzwTwh0mN3mw/8tOjKZI\n+J/g9z1Z/Dp9bN2daZbJO814GzUpijCGOxwTAwZ9gEjdRt8o2iGdpK8uZR7L\njidyzajH2XxrN1OBWZ5V+v4TsURfVc8NOMn8iY14twO/JXbP5eGZYv8XsMRt\njBC9XABn04xheV+UdThEil9H2SNmGHzJyZHrIkAiCqbK3JiUv7HrkkAZ6BHo\nytR+b0bsKXejNHuPPSsNcxbhXN3vyKY8MMZ2SxScFVtDM+uUmAI+yUeWvaIF\nrFVYV5dhYT8kafBq8/zcje0bxp/X6c9zIbohEEUx0XsMOlvZQPWve8rgCZ1h\nJvHu\r\n=AXHo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7+nn3yzKa0FvWiEX+fh1JB36E5lYnnnOQ1C5RODDxWAiAaC9vYdpkjAVCqk30VUFHLzA6vhBuSSZvYBprf8YiKJQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.aa3e078e.0_1614100489547_0.32998418110502903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.dccd254e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-NySgQkXZTH+he0yuFGpKe2aRMVzCmcPDiKi+fX7lMUeNGVBw03EP5PwJYK21iIOvIdPjizIuuQe7KluIh/SaOg==","shasum":"b27aeb59306054d58e5db78dd217993dec3a4664","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.dccd254e.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWOuCRA9TVsSAnZWagAAVRwQAJrocrRNWLo7Y76TFtXe\nhTvro20UPMAVF3xGzt/RKZHrRakolgaADF0TWNxQk5WUJ4OBKvvgArkK3yay\nIy1XrAXKDcY+2149wMRRqOmyCGNfglQGCvYoLGuiwWHBXt58W+niM+Nh2+qD\nUt8aqxJke7f9mTDM4cJthQwuzEfEW/QsZ5K3XUHlB34aQwtK6q2Gsdhicx6R\nrUyViqvfkaAaqwhd1QX8vkg94b7oE2XNhxcA26kXZT0k1Z+f4gMv078inkNl\nuWZlpL9WUTVqjXY3OdRYOpL2w/sHsvVSR01eEOF5JIxsgFmBPziCnnBQ+p8C\ncXk1UDw4PpGTSDXP6SaiJHSCuAp2OCQ9kmcH+5Z9FfCfKc2Gz+9HY9yBp63y\nO7SOvDRJ3AH89c0GAX2yKtyVAAoKxztbLkwkFoMFXXEunKc9vAAlJiduGugL\nbB94O/wvVzGloDFAKotobUDCihZgEwL3Fh6wp4PD1bBo5MWXJsiw0wiAjsI/\nnsHQFCh3pgb0Z/ipTocHpxCSvGZYdNTW9jSZUk5XhsOeGnppNHtY1JhBz/qS\nbgXYYukv1IOCZ29nM3thaIYJ0+HQwp8e+uMWe5RBcFmI5z3cDhm7M+fH7qwZ\n2dr6RMNZhzi8bUu3vI3RbNXaSZ275F2rP9q28Novn5B3RaVT6hseeRnuvK6L\n/WbF\r\n=+qbm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrmV2JslCSPmMBscjk9w3A/ysCfnwmX0PaI/YZZ/AcvAiEAlDy2B55c7shCW2ctMyDDOwUKnXJwryYm1UuyufzFGzk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.dccd254e.0_1614373806165_0.42898936827637546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-DwLv1bcKliIe1wQAry+VUUbUchdfwYkGklFcz1jvr9shqf1M+zyLKPZ9FFnivZoLQ8YAlXvPjFeOYEN902nFWg==","shasum":"939565d7b0808f7f776acd1623820e8a7ba75f5a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.7dd1a27d.0.tgz","fileCount":16,"unpackedSize":66389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQcCRA9TVsSAnZWagAAJHUP/13Lc3Y8jaOMf4Vs7x/U\nj6bXBd9h6fPNcRn+fjS/mUS0tCgbdSR0aLPBpSPYCRolFbnSlPEQbVqwBuSk\n9vvm+EjBrRIv9YHhz+3Y/DsjYeZq88g7/NCTHsz4H/rThcTXme+Y5lq2UVDZ\nK4p5ygfvMk3qwfc5UPo3SwBCqBKhT9JkjU+qvnvc0g/ugmtrX0/5Q6Wx1Ozp\n6D5egLf9LPY+Epich1sTqSe1TrgdfKWTg5E2gnwhBO3o2qoYgFOn0z8GT5t8\nNOcV+2e/AwqOEi0CqkA2Dkda7PObvatx054/wE7illcCuS8IT30Wa++oJBqc\n4UsjY+U/Arw7gvDQGvBNCIgwbn5Vbcs5QqUp3pxK8PaQeqkvZ4GWdJbi6xcV\nyD6EKVYDGzYiq8y9kPkUZqe973UFOIvvDevvlJ9LnxD/wBWT9RSKwzSaJdSL\nmjTh8wtqeOqhJ3pqygzPRqrekNcg+Tr239UaVy3TpioDWSEPymY+ULK9G+Db\nf+aOEB+U3BBGDMucvT7vAK9EbKJ16UvpZZOD4uEjAlnvI6vnsumrxZq3k/0g\ncr2vEKJwbiUgBoB+sKq/eLEVgEnXfyvMn6dFDv6p0EKk7cVixOO727icPDCC\nvAB3Ssp4XXJt4tmOTDbuqf1aASQHTLUP4XNowYrTVthtws/jvnji2R1mRUBD\nzwTB\r\n=JOTG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCcMP+aFVa1JLfmovHCLcN1e0Vv2cb+F8hPuII2DAZYwIhAPZaNr9PRdrYc4m/cN/FjlQvw/zLq9vhZ0RiZUyi9pz8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.7dd1a27d.0_1614636059976_0.24255109591167812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.12574572.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12574572.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-KkE64YIQ1TqPNn0OaQNqhOUu35nt/jMU+Qsn9X6wlZDqyXmkrNijK5Nxa0iFDZMaLQwgMueHtzGRZInB8oMw5w==","shasum":"5d59a44e8e6a9dfc78be89b0fce2e7eecde5c93a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.12574572.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAfCRA9TVsSAnZWagAAgDkP/AqxuwR2lK+qK49ZRtbl\nfkKonQtdXnlweiJcqdfAOt7eUNjyRWMCgYDGnriB4K2JSfT6UZK5YdN9IGYU\nsfmE0teHiCT0pf8MsnnG/s+fgxapctDB5MvMiQmszhnZryETepY94WUuhIZA\nSr6V6Yy3I4bWSg+QEXMn/KhgeL37w+nY7bAkY4dR5wYfZBv/4JtVogucJm1p\ncnlWVxRUL/k67RJVc7qssIVDoK5Y/xt3CNfZUIdJRcsEw+kEqfQF9XpbO+W7\nFzqhHfMpQ7BidDEQ5U97lFlB6B/ocUyznS45zMZFH2aXj3YTPmGbsb9buJkA\na8Ld4wePPz6WyHgEgHvw5Nyjd+DbnbBuIOoKgHbyt44CsLvu3/4t80f8NcLd\ni3KhofaFufjLIIpQSNvk2FOYXWrI5kCcay2+OTBQ3HG6iZrH0V3Xvs7y6AFo\nSAbMtYPBy6VhGFplfANbCf0ylQ2opIcadlrKCDizeub5zPEf5x1tPM2f1XXo\nOhQYf+5m6vgXTThcIxTOiaoADBqCUz3tKTb7aDMFVD2tlX+fiQDqaCTCnoLL\nmzoX01QdFNik8K3ieB7NrFGt4M3YdN43yM1e+9b9Kzz3uXQQAg/0qPzBh7Cz\nUaqoxvOICzvFlcTaw7Z00BkPoccpwMGszT9IyZ1sTpYLQFCloQM/0V6Sviv7\ndmdh\r\n=QSWK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAci0lQwnqplxcBh9tOLTqrSNr5ZSOQyJ9jh1hE8ZLZgIhAMyFTURnfjiwrrDQ42h7flGnjHmw9R2gs3ckdr0RbxGb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.12574572.0_1614716958756_0.4328852774456091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.1109a3d3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-YC3Ag21vRu4NWmC5LTgnc/Wz7wbySYotnHEPhMQL7XgDmyNv/FvopSISnKxmpmZdJWY5LcG74NlX/EU9wTlq/w==","shasum":"859d5e1dbced7433db54e079522096739312beac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.1109a3d3.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqFTCRA9TVsSAnZWagAAqQkQAJ+qWM75sodHIwAdJrSp\nANANZuGilKet/h54wLo3saD3zqhpteEL8bGVOdVYYemYxKPCTvlmYJ4XBrPZ\nE5XuaIyWY5SFQdyX20tm6HCCyzLPdbi3oQrvtMTivJERg5wT2JzpK51K+wKL\nHpE8M8s9iF5lsipEwx4eJQO5UVDRgCEx68NHV3d1XMB0QPg7wvuWKO9Ui+n8\n1oLH4HQT9tjtYuFmaMb28BZ6Jd27KIX0mNrukLbB7lEvylQyX6xTqIdBzCH8\n5XPxVfPXOijOF2EPQctPeWO2XHcBpuZaRpSeGxCtaQb/9sDcOTX2rNxNQFWe\n7aKA1ewiD+a3ReBxmexwJBpQEmDJAo2hlsj9ejtl1C0FzSRmCuywACW9gl8i\nM+5bO3OQthCANReNR9doEU3xis7BQDUOhEthaUCnlos+bo6K6r+4bGpXHCkq\n/ZcRf3x6CbbmH700JgdgF9okRoIng36ATdrLG1k7AeEcpF/v7lyMIEWtuVIC\nfehH66SvnBGP5dAm8fXxr0ybBrYjPhZriUPI1tC+H47VA9c5hRqWOe7G03lB\nDbXSL9MMl+a3n3snQTWtUTTt7kZdSw96B9neLYEMhEnyIQ/5Z+P0xJPRBPH5\ns/NBOIue+awdyYt2/f7QFRGskTBmJ4OK+P4NfpC7iyCpXPzlZAZwXPk2+VC+\nkHZw\r\n=alEo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaHY1PbM2wrehJBRBgWddwwjfbSxBgcHklklZ9y7az/wIgcbP36YUWCle0VssU+bbnFbbO9AbAKO46Kzcfh742jhQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.1109a3d3.0_1614717266842_0.9631616988541818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.b9cd8739.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-3j9HVdGKgkHUMK5ZJaVPMJLa7mpKc5PhCbLHEEw/7eOIqydHTsbynB8Z6I+gTmidldxMNWhluGrRyukONIpR5A==","shasum":"0e465a6892962e505787d6cee14ab493a3f91692","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.b9cd8739.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8ulCRA9TVsSAnZWagAA7TcP/1t0qWi2ANJpN9UkaJTT\nTLMqtqep0AmdX1qbcNFgJ2qtNrocUKFzb5/ad2i9OgcASUnbl/eEt+5Xhllj\nRLWgdxt9deN4ksIy0rtluskecQ50Mx92qRVX8fABrYa84WEVU/fnGKSaeWMt\nuXgjnLevpUm3UDO4nlt7YsPO4ApAdodmFTSApLgIquWg4fKP6DHvyKISqMpq\nuhGK60G5bZbm+sU0V53rdubrwflVqeMXIovKnbvf05+Ta9CqHowBf7frWxdF\n+M7gMQw47T+AQMmhB0xmjlDXQw+eK3XPd7Jxfdt+hcB6vM0n66leNCEbwcoQ\nSp1B2pbE2ncRySuMLhTaYXGMfenz8RwxgKbayCLMoZNQI2+Bn7Rw60zpv8/h\nor3d9dU9HXrBm6MO7bsv4/HuTdWXCZkUWJWsFnfE44COxwiYuSIcVwqd4qjh\nOku43Yh9ax5dy9ddo2esYD8IeXlIH0tHBgzLjQn+SAnvdvIlvbuheUWD5Qc3\nxpHdK2unpJEOYyOusDWbWpvrdOnxFNHfMkPhm9g05JbWlT7l4ViQ+wUJz7Oh\nIpUFcSfvmq6VYST18JyuJssZ+2U8pXwzAnxPJugSQyK1or7weQWh4ciLNvgR\nQxeGvmSRlPUApicJD1b3QcRtdQZLiW6kF3J/Wh20MDiAt4vceqwFHvo8ghWn\ncsMK\r\n=xhqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICyIGLA4IbqCsPWdKreoIs2+iQqjY2aziFqGo+cWQqhyAiEA8y2mpxX7d5VAFtgDryMLTwsOuxud9J++mD7CB8HGLmI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.b9cd8739.0_1614793636708_0.5483937148727203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.71ee796a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-TqgBNABSVrHhDt+MpoUwNVNryDxBrJ7mRxm1T3CNIE3owpJwyujIPx85xjxfMz7n0Zai5I2Hpm+PNdQpnewdQg==","shasum":"536aabc602998eb6fa5c4102ea17fdd676da3a92","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.71ee796a.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1LCRA9TVsSAnZWagAA49oP/R9c2juVnmAuGok36cTz\nhJQCoNqA9L1aJG6aCrkx61BsZj34wp/9b3JLq6y5+k/8M4RSX6LR6IHzfRiN\nXONEdHd4KeJqFNHxBomdb+loNxogqqQrX3ptSJegqxO5UrFzfJQV5ZglxUlL\nVor/FTR8/WLDQ6rw6SRyi9hBzWaNuPUscykfC6B+j1cHpJBMls2WkYRxji9S\ny4erBWysu+oqRRd6eijU7Xqg/dEE1KMUSQDEg/dKARYiPcym9g3pQMzt/g7l\n1BvDd7RQcgrap8P2+MNdR3IRPegZtA6IH3JYiG53dgaHxaciOawo1GmlIcZY\nIfdSiSRaB5qsN7faO3LiFQrqHELsmQjDiAxlG4FK/GnlV67TODTDd38kWPIk\nkyrqK1suLq7B8eLSF8ZwzYD441//z4vqVCL5JF9B32uEr3njSykkENVErp8/\nrzMeyBct1IU51/gHXDpOuIIhGRz2EqwB4l0c46IiXQb+kBBoN4Pcj3gkEDn3\nSRM+MjSmRiHsFKCFLfEiNoaWTS5LhHT/O2oif4S8O64AQ+8Sl3yuJgfSFI+7\nZ9Fzh2ciYHJFoSD62rohgz9VluhbhNPocbdyLUp1TNto2ZN71BmicCo/Ctby\nOVwpxXknSAPUXieAX4WBeE/eJXq7T+kPTWr2Ea7he3OUJ/o9y4ScLNIsD3y5\nIC4F\r\n=jEbl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVLctFmPttMgD/e9YI1xFP6f1sMK7J/Th1XmKF7hrEGwIhANpyNjgMyjq7kkuHno7XpvKvHb/4IOymK8Zilf26NG+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-top-app-bar_0.21.0-canary.71ee796a.0_1614802251180_0.4030497000345803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.2be191ed.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-gmZMNPbq97/HwCRya2tOe4i701lf0HY3aQlQk1YquvL6Sg3JwhUyLjmA4pkbFzio0luyYCGAZmcRstfNGYO9lQ==","shasum":"3f1d9c7042eef022d41dde5316186d0416bd512b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.2be191ed.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQATiCRA9TVsSAnZWagAAAOIP/2uqfIpZ1ztlhRw8pOAe\n1zzzIi1WHevMCTt1lrOkfK/GTvrzOgLmysoezl5UQqC8Rx47k5R9mijyW+mx\nelTG6W9KX3vksaA3GkA1fDssXIupJUCGwn2gz5D5SIYFguwmRc8GTvGKrb8c\nJfNAqY7SEyuMjVi9W4t4W+8nUwuwaD4hYepfcvk/HHJ07UcXuejaSiv2mH99\ni0QqUmQ0nhWcEvdjQhrwUylK/EqGbRx1hU26jiqFjjIuwc4hQOho2h0VWkbz\nfB8yUMRxYXu9+6J8J+RHghX94YzwlhgPDzAi9XrHUywscN2bXgdVngsfDrdR\nqPx62lZdbCNkwrsvGZzlSG1m/EdK12vL9X2PjD1C4+vZ83LlQZ822VQ5Snyn\nDsPCkE0iwWt/zCRTaRNSQuT0atQ9HwXj14uQO6T35e3vVGNlcKcIVfDPusH9\n144l86VGxn8wyPtG0xY8S6gq1oS+Z0unRs/OmK7gxwBoZu1YJcqsFd50ZQ0j\ngtNtd8ity/Oyz9JMFA31vnNp4IrcP8BCsKBKUAIATQl896o5mkj06Lj4qU42\nFN6k2nsS6nHdHKlLcEPWVzV5zyT/+I2poB7t9PJ8G+vEx2okpVGmIojYhl/l\nGli0QQnTtNiN27c1lSr8OvyBv+FW6wt6xbaICH5ndXIEIBkHV+ZWGy1MlHNk\nwQrq\r\n=URxh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi+5+YzArQ4XUgHnNRChB51hLC/VDSW1LeuHPH98E1rgIgVYIpU90s+bDp1dlRyJV22pgvQuyFwBu8yy3QzH9zea4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.2be191ed.0_1614808289934_0.9270893976931625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-h37AqKVFXzaM5jNxD1kdbSXim5TNIhvtrrnc2fVDRjEAvWYBaEVSgH3AWsKMjNjwbHQ/wTaAxJwgqSmrk6ckfg==","shasum":"2d727c934f160e060225a015b59f25d6bdb9594b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.6dc7b06f.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXmsCRA9TVsSAnZWagAAxYwQAKSnCMktmgjs+sEshtLM\nsXQ+0UY3jZ0RwljJa19RSAUALebXJoNZkpyyPg9lF4DFx4943JvFjCWcrbIh\nHdRXoIzHo/TN5Qj793bFv8Tza7ZBwsPZhpIHTD1IhgV+M/hLZ19tkB8SpJMW\n2LGjkXg23agTCvr1So8KtUEK+ZgtMkVcGrauKsJQt/fQKpja2ddbTV0yJNyh\nUXlCLyS28tawWJHVeRgzgImMAGEZVLPwgW9Jv50Kgk7UbocecyX/HYIuZWUy\nscD31nRSJyx/45yQ+s3zrcEgSU4CBVXUBKcIOmT4BksyGKkymmeNJ4ZD3hGA\nlShMsgAmBPT6PRBHkkuzedUJ5V8AG7HU2gSDMfLwRWEhjRKVpyzWT69BqIrP\n8IaUzJ26Y0k4J5Zmelpzzw7VynBEOiXaBXlBcVOan2gZ/pTE66YyLiWcTk0m\nFTopMIHFjDamYPc+BjijA/V5BavYQTHgZSzQ62CKEq/3shCw5rdP8hD7nLHk\naFxOMdyMBvca1N808rj8c2bKc+QKgdKx1LaQ8i3HcBymwMCyA3XyhVTzVBvD\nUQPnvAaS5+iCgu3TYcU4H1Fyfm7nVFbrp/kf5007RemuBm54BMMSJm+tR26R\nXwY2DgeirR7vO7thlx/rchuwsfGz++8TK4jXkvTyt9Ev2y0JKDlm8f5zt9U9\noCSd\r\n=TeQT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5mhMePTjxU4QLETeWCiviXeX1huJuN81TjRaWLKmEtAiBiyOJ2jxGaQPVjMCzsvP7QHjw2CwXZVCDcqZzOd2t8gw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.6dc7b06f.0_1614903723704_0.34831806154275347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4KXpg26rB6CIYbuJDzOZ02F5DowjohcWyJThOJ1P/AlHc9Gg5pcxiIYMJZgwnzxbIfe719aobFamEl7nr7Y2yA==","shasum":"49c9c0065f1eef83658ccbc9add24acdae39e72f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.24fe7ba6.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmnkCRA9TVsSAnZWagAAtlMQAI+vLOfo59CBry+QyKhu\nJfW+rBxUSd+nbZ0fmdxV9WPZD/NB01AKXWZ6hGSPMzTra7huf5m3HomR/PsL\n7gWADhNeSCh331LmeHnLoAyGst5r+xCWw0i6Q7Ok2NV1lrdd1SnBdgz9z6L4\n/L/4yF9otEHt+SXyAyaLKfOxvbddE6V8ayUI4N701ACLQyecdBiyQJK+QxlR\nGTgywG9vchG/EYpJGJCrfnrwO6k6PD6bMfb9b8Xcas7GshsF3OVKVTHWhwpo\nT9H84wpKu4WB5XDJUJzt4TvwAqkeNhNcTRDDdwBLrJP7eeXkjAofFMDs7juf\n/K9qmQh1W6lGYKVDWRF6wcYTZVX171G4tuBfFLAdEpgPC4uaN1slftC3Izjb\nrMaVSKtvFK31P7KCOKOrUQh/f0JrMWt+Rqv0u/Du3FO4fJSaJrExoDkTSx1U\nsXnyzsYri0qDjjAFUoI41lb1GplJ58JQCg+S+UHc9c+68SRmLTodd3lGoze7\nBiIB258rtpgB+xxUXgkXMQQrqIMn0a/2jwdZEzCrOwDRtCWoH15D8sWbLJZI\nYGGOcl+qFoOTKtVNtp86BUMBckeZIE23r25R4WhAOHox+1QpVeSXSxH/3AAg\n/VvOGao2zCMsQcb9iKTNcSnae/TAxUkzU81R3zP4GKxyt2mpgRoFI+q7uTwn\nknyd\r\n=tZtf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB6WXusb9oYdYer/8QigGReJADrwojQkCcaWAu/NxJehAiEA0znCZnqZUaLaLL3grMotsWSOuKl2yczDi6TY0825UJA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.24fe7ba6.0_1614965220043_0.08670844459810478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.12c477d1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YIfYp9fV4isDCrRmZgXvBmZvgXy76cTDodWIdH6AtKU8D238vWXp/WPzywrZq0zwcxJmm090wr+Q6iiLSBk/CQ==","shasum":"c1b9420765e590ec04a16125d49298bf5fb44ebb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.12c477d1.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPdCRA9TVsSAnZWagAAhRMP/0/90P3/rAgaBaTcsWBN\nnrqIy2LdW46PPhUqeDVMwIs833pG6ERqye0WjFucLMnZwX2PolOznPJNLDPQ\nmcGMTSaSULEfmI4FgIXe35a+kPn3ZYhS3/AauGV4teKcx8nCJKgKbkU62VWu\nfFnb2VTw4LZYsYSKYu4HixddV9OYpgsAm3hh6fyERaYMwfrM4JYwOdtrSP3M\nqDfpdheh0HdYIeWAlrW94oNKGD0R0wDTv91w3eI+tAlh8RKDZYfPX9q3NX3n\nzI/370rrdC8iAe6O66wYLFQNTP1Z3P3HPbIwsWb8laGl4oBSL7I/a7oy6nTS\nKQlYgV1tvTqzkY7dYqsVwusYfp/uFCRTG/p38if3BQCIXKm3zUhqRi+bRJcy\nLa9RvfeBow+cMKt//KpvqRWjr6Wp2zQp2ynsjnqEbWVtoFmt6yIWnW7fekQg\n5jAboAHIuJXpDKep2YVzMjCzBS1C+09CQQ3M7TBntA5qK+N/WtNEiM72A2Tl\nj1KYbexuOjH43nobsTmHGPoRFzvcFAqcazFZZ5fPHIi0l/wxmJJbcqXbife/\ns07dI/i3rfoLAsgihKEQqk18BC623JgMRV/jGuEcfml/4U6tDUxpi101o1p3\nupAc/MHcsASAjkRe/12jc8k0OvL9oxsEF4t+YwB56LoxW6rh3TpN02YBfxA/\nus9D\r\n=toyB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaT7E7P2mo+kdj7M1Odehq3o6Empx/e79PhLQ9mU/PfAiBSLpRTxkkYQ7bfqCGDw8ud2Dh8QryCfxDe7LEvkX7EaQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.12c477d1.0_1615242205257_0.9263129012457221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.4c38f801.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Wys3GTWsdoJXDqpZicqHmVmqLtD+GoEmTL42j3+phRUGZ47aKg0H3WvQd8YBAw+wcSxp7JpQdS9f8NEIo8GI7A==","shasum":"5052301e81b70774e8d5fc203d501c9ff75aadba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.4c38f801.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrIsCRA9TVsSAnZWagAAS7kP/AzUQcDwKdNG7xTRMpx7\nj7CxGdunixr5sY8I5SYwV7araeeVkPOuVUDVfy5ZjUiamZEIdBwWD/pb3jY5\n+Lgk/SI6v0e94gcjGUxN2VuPZaGd7YtlVg/GvAekJ/aTWfWTekr/oTuXGntI\ntNiUE1YBHdSHNGccw/DOM9rsTLYx2apDzbxhqWbDhwBQlBDt/I3ce1WeC2vg\nq4KEi5b2FFr0JWrABgkfqEdAuEE+SnIB/8IIJNiYa3mrTl9Xr09nmYMG80D0\nJRZfDBgoAH6+S4QV+j0iZNYdAXeMojK/oDqIByztyZSlvR595kn/Pf0/zwD6\np84dwJJvrU3KMVEN5Dmfs8jQkS1r/FK6g/OcGwIF9UWGeDub6vQJhNemsDfu\nVwlFkrPP3i2c8Q9XelaJ8uau1UOWCPZ2fLHvYAZTrfCv4bx2fexLHLMhflB+\nmsshZ8t18baCozu9JvjVMXtoOCGTPzy8WNdrSaQoGBpsUWnSU4G/xRcLWbjt\nfNcpu+DE3tUJVTN7tLRPSXBmrtnsZ/LjsxHQzSnMgXaAbXeIZxeseBfA4iwh\n1OvrGYvg/fnCA3g356WS7dhd6EcWVXJk35EDdU3IXxG8vyxs2mpg7GMzhO+V\nnaL0ODZZlCaaBRMl0Vx9tpvloaLX4tjN5zEpXNSuyCONXObFkYcfiP8jeJfl\nB6kw\r\n=wTW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv5F2gNzRbfYcYvSnCW6BGaYAznuSKkjaketgTQhkovgIgHzhMWDkKQyrkPwrWt3F3oquLVvbnEoyvqRThJwyXoVU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.4c38f801.0_1615245868067_0.7686171164671196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.8795b83f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pMZrVhqqYwqdQefmUp1VnfnogUMqUV3s/YhGueEFEqvlmh0/DshiWLdWPd15+ccK7t6KA5ADSPNrj70SU2sCIw==","shasum":"00143ce9673f0ab531df067eae5c4c4f63b986f3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.8795b83f.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74KCRA9TVsSAnZWagAAysEQAKDMW5jdlyCG7kd2S+KA\ng7oefgN9+bhtbrO7MCiUIVk7zR+s8qhwa8yWMWYDjFAfLxVnGZlTklEMupxG\n/UJOtY6AOEQF3yKQNKgXkp7FkvQJ3bfr1ds6+nbpbNKOJCFffyyoKPN+n5s/\n4SKzj80B2QcDdu2iNIA55xhEy39EvNUBgYzedx1t3zWw7EsduOiw9HaX03B0\n8MVNRNxGMMzZ2ZjUhKuQnSxBJphnnN4gCmR9KbLU4VTY/W630pCQFdPkla/g\nw8BOnjFRQ6nVTPIN7cx3PslJoSNEcpizgrZSvnYVxzOlHcrH69MQm1f/D2AH\nmvmdjDzfmiXhBvFFoaKZw9l1nhscnzuk+iJ4Sth7smnaSAiuM4Nk2iW+wLcV\nhW2QEMiYwssbqmh8ebY3lPB6sh/BmczHFoEdGvwxcMLIDUTdUG9MYlbumQVU\nA0fYyUh6mXicnxLp3IDBvwlYnYQ7ilHt27mISkAbBn4uc8f+KG66jBhR9pyp\nSyfrjUf+gb7DMj03cY+c9nYDgrFmoFu7UfTDIqw3MIu+hCT0QsMyooO9PV/8\nn0IZT/u+yMLKKS9w1cQKlMzLkPagWS5MT6jwfQ9jNYhwVthHMWBgn5zNeFxb\nvL1yW5wFszYBYojGnVWoG0yIfEsKSrkEvoZqc0am5ff+1NBaNzObbd0iGRMr\nDqGg\r\n=IGtE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEU5nlk/5Eis+TFEzxZFQ5k1rot57qkfKZpwMO4MFu6QIhAJVHA6KqeZHg6czqlkef3bJp5Ywvf7ab/iLNtrpg4UQH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.8795b83f.0_1615314442069_0.27442876781301684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.12b84cb7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/top-app-bar":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.7522dcaca.0","@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ou5qLiODzU6Aj8M/ZkdBV7pThMxUXx12bJULuAtOsqjQ8byYJCBaaDQPDdnR5VNzVs7R1lN7naYvQWrpVPiCRA==","shasum":"5d843780cf1eb122e19698fdd491bac7df99a1b2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.12b84cb7.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWdCRA9TVsSAnZWagAAbngP/3pBLW8qN9ZaJzDcc1Oa\n6gicayd1CmIPYzYPyaDaeI3BKuuw5gfect1MqC3THI06m86ItZzbEjYOIjE0\ntAugPuypEu2jQwmQSvkBMWRkLpwqKskocRGfUZpzhOd7MZSSCjiiy1DJARww\n1tuDDM5PUd6cVarODQ2JqmabbrltBMy/gQCGH+0g/g5fySTSCL9KEPvKUuui\nY4dM+8uuw1djpIQif4QO1FoXunBanpoUstNd2m49MGWehsXOxrekNSXsU5nJ\nzXqT994b8MUAdfT8yerZivq/GhjPaA+nRg73JC0L3Ft56FQWfnxqVxDpzN6j\nYXzEVvQXsCH0TfaAYQ5ebpoRK50+u0T8hgnA4hnPkIEdfZ4CsaEsz2TewsgB\nsocJZDvSPqV3qkBh8u33ncrgGQndOGFHwZ0/jdujm7p1Q85whPvgGNopfrJk\neiryEKwkRn2vMta8jh1vwVsqs9ByZ0U46o2pdvGLbTvW0bmJS8/wz/qESGvA\ndJBK13XPQszcE9MyhO7gYuUYVyGigS5hZ7aN/9n+AD9x5xnF+jLFDFB4Uvcx\nJNPNXEY6K9S5uAQvka1gmp9Lv1VgsXTj//LZkSVd0KX98Shepim3HLtXUCnV\nvCDUyWYoWxsjzNQjyijVmiLQ/5CrtiOz9ku5stHIy8csXUo1Fl1sGs/eKN0r\nZ3+F\r\n=Te6j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7N7r3IibI0mZGuodL61Luay3mMSIVkpSS/iIRB8f1LAiEA08D73DrK0cPd1blZuH6Ekv8Y6oabvOAWlPqwx7mOy9U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.12b84cb7.0_1615336861189_0.7747523692624207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.6ac6784b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/top-app-bar":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.7522dcaca.0","@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2Ka6pGDcaFNNYoU6lFSKoVUBa6jM2JzmvZrYQ9uU+FZP+JexlRlv6LVcyaHB248yce3QEl34DQFc8AtfqqLJeA==","shasum":"5500eaae42a75ddfa7e0def02446087828e58c29","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.6ac6784b.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBgACRA9TVsSAnZWagAAtjoP/RYR4YUsNUKRMUDUEXxy\nGJrics3gR1A+jKtuU+eOJ0EiNfh3MLaKnsJwfKQnWPqFHWdAUIP6lGdDmiz2\nqnDaAYKzHTLe/NLVoh5nxfI0T/pcRxJSJDmlzfxLi/jdb+7KM283ztVS95V1\nxyCr5tpiXFQE73DI8TuvBss/LVbuuUFc/aBiOKZ9qEg7uS01tunCFLlS60y3\ntNw5M4ZeT2PlmexD0m9ijmq25pdcCc3zC3T/dyZ8RZO3kFQhmJ2GLSqJ2qMD\nDIgjwy/ZnTkzU8zCqttxhzpBIovebOMjy0ys6rEzPTDbvagPcw2Bj5rmC6jp\n8EpvaKetT+NUYNLmfOHUAsuDXNXwsUhN/bx3FUhYQq8RSOU7oN7xYA9/MJRJ\nMojFgDZ99u//Kxu5N6x3Js+wbtCKsF6Cr6671w0rddnt179XtBGncbdejWCK\njdCcSVRpqt7sGiEu+Ovz1WnYkIYjPIbgHEOp5vyYDDl0EhC7jNe83UlxjKqf\nET9rR785RtHcDxndkQNPP1g9bZbYopcqPZId+vOh+q6ntcTd5LX3mSP58GZ4\nsN/rWI2qCXVneZLV683PNDeVing5L8+Ga3a5LuqMCAyXfQ6BOSyC38iAMJxk\nBrsJEzqaEjDrSQwCCv6yBWPssoo2duINGFI5Ylx8iFfTZueotFcLLBdgbiLd\nnoDg\r\n=/Fxu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHIToZB2BRnvlwNEpYKz9jfZO9CyNNkJ2T5Dj8AjW6ZUAiEA1e9Ea0GPDJgz261SR4HO2Fo4SIFZZPMJe/9ocmYeNWM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.6ac6784b.0_1615337471756_0.5795780006843987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.b6d92934.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PHuiHs2YgurfW+HP5w5l7umzHMm2ynkeM/5lVK98O7O3j/+8BKy8dqRD66SgIkim0BMZxGxX+tseN498JK0IGw==","shasum":"88b13ae97bb7b0127edd28bbc79eba1fbdb8a04e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.b6d92934.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGSCRA9TVsSAnZWagAAPr8P/2MYvZbuxFXeC6iL8hJK\nIP9NbjfsSAw8Vmc1LFubEE+QktIq5nK2pFqNWToGx1jSitOVXzVuSKF37zlK\nOfG8/oabWZJJAmO8T449jZV9Mizu32kpHgvJaedVMmZRQESGwXgscBZk7Nep\nY3skdYlY1aaVWLEIewZWFlG/lWB69T2CKmB2mCpam1Jip6aHC1rjKe6qV9jd\nodjc9xbxRUP1QLMPB/pJG59ANRkkVZkW833YYMguKSNIxD0qoaedaFWciLVR\nUIfvZJ6tQDG4AEM1Ef2L7Yxy280dLRZmBbatsTvnDFCiSM14J/3M42eudUJ9\n3PXdbJbCWsFSIy2lbdOiqyZKH16Ua72yBss9RkdkVuiHBCQu2DqqW8Cf+sQ8\nYFQyGOIZFxsqb68eL5e6KZtYdn9qIzQ1DmsUBwRugfHxdN1OJlNPFwWMvuKw\ntwQa8FwzLyRRfbvjhFPCr0SaSnSF29ZLgjM2FQ4kv44dWjD/a0GmHhCI55G4\ns5SjF7VnMpszUGWB6zpjvWnWoaLHadLZc1OP/shbsAbviQlgx/Ia1o9yDE0a\n5l+xRXSNFLhdUxUJ7tu/MKqJ5QmVyQjt3s+IOJrcxmCTdhaupzlmH3qLk+aQ\nnDcpjgFaG6Xojl+SpF8CKYZBLkzIcpngnYZdv55DYaWHCPPe1xAcxKqt1z1g\nrZty\r\n=JYCu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp76i/w86/lN+TG4v6Ua00TdQDSSlq/uN0FPtTD9p8DAIgJDbCKTmR9S3EPPMdPCINY6XC+aiqHEpDh/s43ju6Xk4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.b6d92934.0_1615413649477_0.10713934679570492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.99a55b9e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2PEj8oTus6M3oCath/cyQEEsf/eRyweddh+7PEO9ccp3+saEGgZC2Zed0cKHtDzpNV4Oa5eykUJZGiIlVuJRRw==","shasum":"5a5ad5fb64d7cf7e09c9c88a1f3db9cf2595a3c4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.99a55b9e.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU14CRA9TVsSAnZWagAAd7MP/1Eks0Sh2eLkeEOzPN1Z\nxGsePxfvMJG025TwaaicXRoFAl3tzbECj5lh826n3lfxinXvN+e7xiJaN1lE\nLjPrkmPDPxIraRXvPdZv77rlU/EhJyjFxGVaqV9JINgpIFqKLjvKOEn+3qKB\nsYI2qc5o7FK7tKggbTERJbVf2gkaZ2T8Zz6MwXe8gOCBjtnN3d7aJjIyP69f\n+ghTRspJ0SHwgF6DWz3j+EtHiKY96QfaO96WmFLobPuvjD8yYdO0ANCmsbyA\nrhdEwOOJNcL9V8YXkel0F4SaS5YA4EMRibtFLK/wlIEcdkf1XXy1RKUIjnY/\nAVpqfkUvP4KxsWtQFpr4sJUdfW9DFTtK+iv+mnvZdewEf+ywyls0wMV9XDgL\nfCZniCN8Gwc7FhlWXOhiFUNbJJP2Ikza2hTa4bobm5Ix4xfDBTM5RNsyqkpB\nomOg/wNtNL/zzLpJ+spxWmXj59204IrTtxKWK/M9ld39FOuY3slJnmhhqwQi\n/jjXuntWFQ+blj5fCv4jsQ26HByYkRjtvYm2vpIst+XJMibrykd0dLcEPFjw\nhgmq11a34dh2zo7XghTCmsF+XZgcXUIRDFz6PXNr9hphFY00Y0uP0qEFpAOY\nCOPqA/6QheAvIuLe8rmfX47YjHIBlh1+x1+GrIaJRbXNs6lfeVw565BtYq4s\n6cKD\r\n=vDVE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEI5v+FB3gj//QA24/HryBRn0tCKF90ZuUZbbvvbB/ZcAiBgKWvfmi1BKTMiROYFI+MLbXzqZeX7JgATtMJTi3jCrw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.99a55b9e.0_1615416695464_0.5920298007260567"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.bb14efb7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-r+D1Ih1abHV9EutLj7On7jW/fZ6yVHI4GvtzHZeRAm4RTYWyn5BrdZMYYLNS9QEwpYb9p7BMnDEhH/eKdieq8w==","shasum":"a7a6673aa511896aeac4aa30c78488af993c6a56","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.bb14efb7.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVglCRA9TVsSAnZWagAAuZEQAI8tAoxs/DyjRcUaVeT8\nUJbk0z5R8EDyCg2s2o+5uL8O/Pc474m07alH1W3uYkJQ5LwA6nU3csy7nJJA\nz57eZxSpyby3D9l+8R5LBdZGeFmgvHa/NBf0RMV4kBngpywnzl6X6RR8Xykq\nsVqQxK9+NHCAdIT47iroTfCPXZzvEPLRTIR6svtgTyuqmVilJOImzC26fQEG\nnT2cypMvKcH30L8PGjM5I6tS2p04rSlpuwmkIT+0Kx1pfvTjb/9cNvpyuED/\n0XiiWVuYNMZSevgzXrDyBymUczskeoBloifCuyxx6LSrVJ3/c0Vv7jcrp3ni\n900YCMGjGyBmrHdbWWg33p4K587j1UOZzt75jGRz8VzHHfuIq1Coc4EJ/yuZ\neMBZEmeLOPWjkO2K/QoAr54UIDkEQCqX+otLCIMQiNkTUCd0bhe9ycyFdX6h\nZx4vfMVfr1DIJuG8ghC0lM51uG7eARl+oezWjtsoUoB3KrbSWehXMqtXo+wE\nAsvoq4CVctN0yC7vlFrgQBaGZIXwYYHJwX1Hu/Ab02iai6ia2/t9FQPiXOGp\nBtkMYhbfkv0fOHiKBAilLPJ+3U0SarLW+tiqef/1BnYZapyao0sjFjeui+VZ\nE5BLdB/LRTM/WCI9u5qr453Y+NGTeGryLu2l3HXRbLFU8emAOJ8Kpv8Yo7z9\nowPN\r\n=PYFw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDgdObpD7gJCQW4NuNG+E8opms1nbpr71WmKUjlvt8FAiEA1FTnlR7xOBrmUPmsJsy7C5sHIkcfMrAzGedlwFOfkso="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.bb14efb7.0_1615419428778_0.9760028201241422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7eZXYIlTrvdWVZu32M1+4OB9bIB1TCXBYBPBiDfaz5kfVEKNTmi4y3O3PsiE70aQEmI0vp+WyRFNG5mwWpLPKA==","shasum":"3e9ff3d8d40e387d204cf30e43ce465b444dfeed","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWLxCRA9TVsSAnZWagAASREP/j7+rRj21fY+a6MSJk99\n9lsvx2Xmkw3J6akHy8ESzvCvRQ7s+fyaoonFrx4OVz07Iq8tZhxRiA3kMJXY\nEj7TG2tM0+wMypnq2IkXLXtovo1iDLqynBOAv66XKxKEE+5vFEuR67cn5KrG\nn1S7I8MG1Pkh38cvIHsrOAfiFrgHlskQ6th+q+r0kA22VqySWdWQx8af7WfG\nP+zXMXTRKr+jA3pll8qP2egRCrchtA3ElDxwP0RRECQ2EYY1L7oeCO/U/I/S\nswM3qR3D26Mm3pyJuzNBf6lBG6bUStCgW423q4qj2dJF6zxbbA8LizKoTyy4\nFaD2grwPrzW4cVXDdTDUqgZHoa1Y6doeT5o4mvQicb10iF6cnT/H58HWWDC7\nuJB0msKA1IwlULS9YL/mc8oL00EYJ5OKJUJzjiFAzc+023Xo+ONyoqPNMeYd\nedrYY61esP7dkAzL48aramLYR9cnMKVbldjV6gpgEgB7gp0xiywbg1lEkbHK\nVt8WyznYfC5BauUDvEhHobnXTLhUzL/C9CV0RaR/bhgSXyA1lONiI/Jx1iF3\nuYLZjMTA53eHIPS2+gBPj33aBvoAelA1NeN1VATulFIp7aK5TqKo207LjYgX\ntWAho54pniWmq8FkLVK2MZJxzE2qdImfhr1xjCfBuIQgDAW25gNC3TTCSgEU\nx9Xr\r\n=mnMv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCfIIepMDOB23Gs0FhJV+UCZHhVue2rcdyq/+avYhDVAiA9hVJAeP5Dzto+6d96CPHN/73h2GnoHRrBeB8c8Rt+wg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.9ecf3bdd.0_1615422193104_0.018028191852633713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ODwv5Bu05XpwCmU6lCWxfEiioc+qaNeB9rDf8xCtSJI0CBHzVaSRHSjobqydEvZt6ICjxYmNBv4w4oO8mlULSw==","shasum":"47d2344a12fb20bed8b98d25bb3b283e15cb54ba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.7c0e02fd.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXZ6CRA9TVsSAnZWagAAUGwP/j4UTvVKsEMTyPtvMZcJ\nJbopnR5h41DdnPOLZbSgvHHiuYMMlJzatzinBJKglaVVFyF+KWFHx9CDKiYF\nNA1GHKA8NUL6yA8fv7vjTnQvif9HsAW4KpkQc7IS9RLvTWyyObR4XXerd+ti\nNdCu+xUgU64qtoRTavW1sOqCStVxhPBG3andBKCj55e57361vH237ptguabT\n0FyCaPIy/YrlDcK8V+z27A6CCoVLYympA63tuGoZU+WpwcuE49+RYvRwx/12\nNQumLF1FAGRwiBB8eDXLAi91ojPdHlDvw1cx5ilFO4E0ooWht4yAecDqzJYu\nrlsEeIErUCZ4bAtjb9AsolT/2XaOujLEoCYb6TCvAyayVRc5aDXdy6zY/G9P\n2rO2zOXczZKUYRi3oVxB7Ti8Kyp0+VfEG8Aop4KU4PDe9geFkFJhm8uO7zAC\ndzJmiFVUQo9HI9RTqioO+p25BIBBgEo5gia3Ccl0E5LJXxYl5qzJZjmu+YdE\nwF0DKAxqqz1NRP+h7cnCinIyYFfZvnExg7XlJmy5QQzDx8yd16ULaLIIvNSM\nfTP8C/6c02JxOiVPAKWy1uPtIKnliPh6sLhUlvyCSDqN3tZVrcR0ch+dHuEM\n6CfE/fHO/8z5pVsprICERUB0bOhRCNBarbIrvx4+Uk4osb8qD6OfCVnS6Irc\nlmAu\r\n=5Vsv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFGSN9oWGFrkmeCQCTyqOOdfp+wj4i6eBO3+WqSOx0xgIhAIOz+2ITj4o4A2kRPNxzLAi8Q0BKzk3oKYw4IrcbnY8s"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.7c0e02fd.0_1615427193755_0.6996390737352312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xnlyr2MxFqv8+yktde6eme9oFPJlXn/hULNywywEGfTSUeiw+z7BUa1iPj4Z0apwOvEU5uFm7iMYhKKLOrh2rw==","shasum":"373f24fddb5c61c940002b613be6ec6ffc356e35","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.2d6d59cc.0.tgz","fileCount":16,"unpackedSize":66407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmF7CRA9TVsSAnZWagAAuLoP/iY8wDNyFkorJU/fVNal\nXYFV/4SE7u6CIfxNBVE/M0qw/wHBSMAgf2jaEsmFJnmOS36now0iYGfYnfgT\n9YHVqOUAz5Lh5k/1jQ78QVcRD2+GDjza0Q0UY1+1efpliblvSNC85utyo80c\nBKhoEwuHNOo/Sq/Y+cwBZfBFjtE6VH7wn1YOuxjGmWgAYznb2tur7PcfuceN\nqs2gqJ6W7No97JamAFS3m1YrotMJh+vxsoY0uYy80mJSOS9xJL/R4HKivqQt\nlefLtQ1fFJn6eGktOasLSPtl4XTmJpPdAhzLbeMM3XF44QKo+627JujSIYhN\nYqDbFR8r2ddCrVEv/ndCMn4Bt/2c+uIlfyBbLo51ug7Ouvm3YMvqJkwUi2qX\nyZfgSv/8I1K9JTqK3rfBXBevtFTRj16aSeskme8EUQUQuCo5kU8Rcgji+5kY\nIadVokAr375oFycBVkr0Ca2DzsDR8lYHAN+d9o/R7UCuTjcEgy2Ebsv+ov6S\nD/Egqb/NdophB/spSILeCwDMp1WoSBwF+PC/1Le7NCpdaJqvslTg1cLhlAQn\n00F/NDw144Vbv3yt8pGjzzlDjYXWL7uWGaMEg4SCSV8KQoKNJEp62QogRqmO\nALIrQxYKXbYAxlYNlhyU5OCP5qd/8UK14A0gGHg0RkQlIrRkgOupmRAg5iCj\nxeTV\r\n=2qH0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHX8jSE4HmMiFDoyNHCA3nJ7j11JBj5sYzDmPjoLh2Y6AiEAzsdLwBKH10EhZ2uqWl6TF8GsF98FdDexCfiOiAl8p04="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.2d6d59cc.0_1615487355214_0.6670621159707875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.0138863c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0138863c.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-j9iGYlk6NRYcHgu24LOkJN+FYUswXfI/eBJn3AKSDOUWLjRRqBsBBon0OA12Wp0IwbsKyOrVxk+VK4whKm1oIQ==","shasum":"0ce8f3e4d0178028b21cc5b908f27829fffdd6c1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.0138863c.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmM8CRA9TVsSAnZWagAADjIQAJEzEESA3TjS65hL4cUE\nn5sABZnu6CdaGU1c308oa9fWfWpbsD3tmzTx7fkZ7TTUYHAjqE0f6QmNc0sV\n4U1NTDqEs5RAjVCgj1271TNf1uQDJ/VqiwNoprRGBftgfi0MooATocTCjlIz\nL+VuYlPqpp+GMQtpsl/9negAcMSl9OeC0w9IyjTeO0ZXTcjHEmRPvh+7PeVk\nVknXerjo5zNyia4NXHmLik2CYY4K5RSs+u7tJV+X/FXM9E4kB+QPmnXd27X3\nR7NZF28PgfnoA9jQ1Ryj99YTgCMLlppkjuMQJw2TZnafLrZFDyMiJOzXp3OF\nHmR4Dyh9g0Q+AFmKlSMtYnW3KfnTDamVn9srXqcnCc0xSPpPqq2IR6nTi/4x\nVleXm6d7JMYHG+IIl8o0/b50mUwpUEXRPiYmV6R1iIHGZftt0huxiI1z96EY\nSUmfaUM6wc/FC72Mf7IKsZYCck6wMn1mLhyKWTKX/44E9BBaPpxzUs3XIuXe\nhJJH7vailj0SG0AA6cNNYUxaMYrFZfPOKpWLtVNqvSUxJ6pV3+2oDD6+LINM\nCm81FQyHxFxfIDRvcDEQPP/rYMKHZXPA+mfChedDUHib2D3rbmsm8yRssi5i\nnnelHPgnjTMKqbjdX8lYjctafSCmz8q0ya1kWka++qac5CYy18YmktlQZtNO\n9dKA\r\n=fFv7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8ruQ54OVYsuIKRouhiogle1PCVazakWX5bwlcP81UIAIgTftX2NZtDNWhxkzOBAcKrnBJFpp8r2IT0hFhbJIR8YI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.0138863c.0_1615487804217_0.31421057486394366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.926f5bad.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bEn5ppI1JC+Tig8qPB+0ortwX8cBe64O5MVeSZBUCGgg0Myqnj9NuR844o1gtMqrEZuTYLl/vHwqvb4itS4atQ==","shasum":"f1fd1b015f3daed7497347cb4e3bc1fe22799196","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.926f5bad.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnsgCRA9TVsSAnZWagAAEh0P/i9poRHl663svF9Rfj97\nyl8NRjpa0tLMjKs0Io60WWECbWhqGyOU5iF2aFtTIC4jj7l6OehyIc+zAP6t\nMZ5JaCmVVpw+qssSjx5bzX9rt+iTtNcqwk2iznHOaRGjMWff1gTYiPNY7wgZ\nbWRYIOfcrWgkJ3tp6VQA0TGtns+DR9Ek7LqUuUwN+IlYOyBVtufCy0jHonfb\n8n1z0CK1bv5sLWf5ZtVwa+fSIdax3vROUWRX3iIjGNzhOfX793ArSed3fC8+\nNZpxZwCs0CxSv6pEq3EMBM5KoPWmT579xJEpUlCFJr4K6BssLCrQMuur5SOG\ne+I5mPBZnGFFcMvZw4V69HfDeuy1TGlJs+KpSxFkIgTWLaut5e7Ovv8z7qNd\nj3R8pJxCZNPPX8UguLOe9C77IU1sq35q99dAlVPVu6hbDrqNpZsIoyBtcLS5\nEouImlAN5NbyX9WPORu07UzzXEJqhS7HMiXBxSzZTTD8BLCP+Vz4OcdXO5kc\nG4HlyrFhUEn2JhNTv0tUGa9YsNNVCWsWh5fnDiJlPSE/73OJWbjqhjwJmuuj\n63dhpKjAdjkzjQddfl1GwHPE+wu7FxI/SwQxcu/BJbMZp4Dl/ndpc205jInD\nOkdEweyp2DzFjS89mZkNm9phX3hLlt1ztsl2HsyLeR6aTXPAE1ZHHZWC499y\nOFQS\r\n=/0U9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2WCoIjR53QuRodpvK0Qi152TzoKStIE0aWhE7t9UPhAiBilHTNa9Xc+jqM7TBiBIF+Tubvc/8iOI58HuZih946VA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.926f5bad.0_1615493919619_0.11016216766741294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.520290a9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.520290a9.0","@material/top-app-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-X7mFensp8utvZaF9oY8z2TL1RxbyRvw3ciC5JFLUb1ALBf49m+MFkoqW+T26onIxhFkud12aJjGbhI+eSUgQBg==","shasum":"8b4fe13f41209edbf55428f075f1153369cb49da","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.520290a9.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSplnCRA9TVsSAnZWagAAmGQQAIBuPX1yi/v4Req9+Mow\n6f9TfMpVnmDZcN+FRMqCKczqBoEVycu5yQzZd+Pr0aV+f7X7hUdn9289+c6t\ntpWv6vYtSmkJyGiKGJy3WzUTXme0AH8+hskVy9eT1c1h/AdI2c0Tr1YfK1ot\ngAHXljxRbIKxXLo1OuxqzfEA4PP1WcbjAEdtyfDw1JIXXtdwtsPM/BQzSTGC\n6o/sWtOV6YuVi1kj13dHZdCyQgxyvZOQtEp9nSXp7IdmFijE+ZQDArQoVO7V\nd2BAvP+ocaDlZJqM3A6EUEd5QA8lV1pEJCtNlVrI8P18ENmghgujO9vbxfh2\ngbg+6kVIJhBKp8Zb1gVnhuKl1eR0O7A5M6EtZucjiXjJvNqIqcUhYZfIDO8S\nq22fev8PRHWyR2Wlj8stQSMDyPn7vJ/ikshAbCF8YJAxAELcec5/+UxQY9cS\n0QFmd7T4G8BG7sF8revw2EQeTcVrweEf/1Ct+v90mJ/MXFylEfVsv6emfF2E\nDJLbWPaX+DCTXJobCq2xkCiY4WP0BsJ8j7HkNN2kImE9xsSSvLGTWHw8g39T\nt2ZM0tf+BD1JySp7BgyVkGixGhyiOl3cV9JJQEisk3VEnkVobV4bs10ljQ5a\nrfUe5Xs4ghFgOb7SBdaFYDyboDyXHMMuycl3Ij1lTc2i/7HKjzr+rXWZsMhp\nOmCE\r\n=2Vjy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICks/XWTu91OnaE0urqHhj/Er95lwcFX5tNIs0uX2nzJAiEAsBzwV8blR0SJ6QyYXZBAmYauWAk0gWxRFMDeSCboEX8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.520290a9.0_1615501670949_0.6992991007687108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.9ec431d1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/top-app-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-f/rex6Z184W7dHLl9BNgvpwcctN63LEHW+B5rcZcxHBwFYoh+3RTx0VLelAb0D3IGH+iDixcpsxUwEZT5V2DMQ==","shasum":"5205de6260e3a3d8609dcd77349d704d91be1b4c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.9ec431d1.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpprCRA9TVsSAnZWagAA9xEP/2BoTus0HIKPpp+39kkZ\nYKa9F2O4AR6Y+NEFdehIuRKdWBK/hvjFIXSa6pPTznv3D5lgfy7HKD9t0YL1\ntteD1Z5gTzd/QqOLsqksAIc+A8qdtJLh1odINuHuIe1NKtW1wVd0bHWAtPLX\nDUyW+ZmMAnOw3qxYY9rCGjtUfSYbR+Q75MbRVtrAiioORQRF1VvvCoizumwm\nK8ulP2euedqc5gWAf0Moabro0fvcquyr8QOLDy5xSNsgLiB/WnYtlbPN4uNp\n/F/zsPwMtOPZsFTdmeO3rjLMck/GGy4ZIAOdaan0v21btsdRqh60XkQmCs42\nsgtbNwBCIeHYEMe0Mk2pCgcCKm0Jbj2KroQ2t4B6ULZEoRiBNJLLzBLfPQvH\n4hK62NdbTE8k7sOHlzoWdbKsxyJR9M+QnoqegEkUADmhKZK6RKm/DtOWkN0+\nnmyP9aaiMR6jMz998gNSehIDta+8n+rWSVd/3K2Ov5PDJKQJUJ1LgwxZWD5N\ntigmeQab8VT7A5P7FZIqvPSa3mNSY4yH0jSkfgua/hje/2e0oYcZ4ouJCpWW\n2X0ILntfnr7SCBb5zpvlcz3CuYf82hl9AVCSuezusC2WMwGsUUUAJ2hYhXL/\nUeMb9b2eHv3POn+ga172U+jf7yWe3S4JBpfpungYUOiVut9z/oX7M8OZgNdX\n86CN\r\n=mblh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDprSiXI3cTBF0EtXeGl4Wxt8enEm8b7t1+2jbto6orfwIgNz38WPXiIxltvO3FMMATZMTDNiZJ5VcEjdynpTRWPmU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.9ec431d1.0_1615501930502_0.35410811831971145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.4246c082.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4246c082.0","@material/top-app-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-eHJNHQ6Ktw5ibsD9J6IaAk5yQhoJTFtKGXoL9Uo1L470kwauTdOchBmOutY7XNTXvLmnkENm4XVs1IzJSeqW2A==","shasum":"adcc488a5ef5d23d2689097fa485624a719ee732","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.4246c082.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwSCRA9TVsSAnZWagAAqc4QAI2+IsWKvPmKfYT0UeRI\nXRAOnfndhswWDLz7S+REe+Gb0Pc58bi/0BOBr7WSAR0yKmgWVOIjzwGP6EbA\nOyyAMxdfdwPWdLPv6+avEguer2LxsuW9MbSkBTK1+yOJx0OzxFXSkUoEOh7X\nv3KS56AI4NueS6saZK2GJWNED/J832iXVCCxiId5nLTeuscLxRWT8XSAmke6\n7eEkGzjb1Pz2k3CYONlEOeau61XSwHQtcLoV0Td2sOQC6DzXvoU4YFd5IYR3\nFB9+PBBpSw5q5STR598KWUB9yc9pwupbQFsDxTZo2HSi48XrPsdl0ZyPR9+M\nORIaHMHUIy3mzl4cdN+dsq+FhOTTfROYdILLXYJH6X+qOUlOHqltJKKmYiqs\nL4OkBZSGHCw6jVpOOJKNrYaxiHsiJXJmD3MObaRzJsCQ1ikAOxAweTcJxeZ9\npd7f+MzuwxVHg1T2iFwx/IkEQ7D1fa1rMm4QIDvi+I9f0c2J+YvgFgh+WsVg\nMTiepgJrAmjTsOEFvtb/plBr8lcs+Mlp7QtXRAlxTowtiuQiox3xM9AWn9xn\nuHUNlUovSuhXygio8J10cwHJ0fE65sWB0EpR2iOlOB3S86vY95fauD6t4YxF\n8+DC6Qz2T8q87MfZZx2xYPSydL/ixRuvHgQWDojNklrJhFkT5lw7EtvMc5a0\nvO11\r\n=0LCV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyT6Uu/wDFe7xzZ81oAoCKmOVpJgRS8WI8+TtUsZES6AiBRQdxKDC2LPh1Onc1tBc8UZHFUKssVQte44jU1VuiiVA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.4246c082.0_1615502354378_0.003689400640961127"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.2d736253.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d736253.0","@material/top-app-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Y72SYkZQgTyNWUCsDVlnUk1zPIC2nGQUszgBiAt9xKGqfazPQUAOzSIzyTElz7yL9V2Zm4N7e2HN3cr0Oa+fXg==","shasum":"5a7df872f33c8a715d2337278696b9a0f0e5bf63","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.2d736253.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+E+CRA9TVsSAnZWagAA1wsP/2i5MNbWZ4aFbTjr7CFA\n9kw3rImCElTjOyT7AZTH+FkqXk4Bs+sIUEPZt3qdvuf36KMvRlUJCuNs/E//\nYkQf5RAXcuk8n6zrCLZYlwjQv1jD0DsfKGkhY9lCuSkyKRLQ6ZrejusYnzFT\naUuL2KIROuPUE6H3dFQ3KXpLx9gZCK7SpP0wHUpiBvzhCqMd3ZAEdxpw4CFm\nxYeJUdsC3UyfzONgODGqNZOYBQFDN66wzAABHztD+4D3JMsCzTsEFaZ6ngec\nGnNjVY6qvVk9Jhcl4kK1pSntEya8IvUqf/RWNKGx29hRuYgbPG49HD1KbeHX\nHHGrleKX4uil/LPNtO/G21sHPCOM3Lln2hsNRipkAeHdtiDGYZD6S7em/83s\n7uoFMT0s8BZnif6XNkJCQl8i+uZNrw7/bk8ea45Il75oO1rrG7XJ9ORrAUwC\n7ivK4LAlvF4ygvO4fopOB1eh4Cq4MLiCP1MG7mo/wCjLupJIXmJWuUEpYGkM\ns93icRtIL8n40pVp4nuKx9EaJiTq2IaJBBFdZkFLw/xUSu2pePMqtxDygnqg\nCASSw4IN+lLGARtKUdbMjJVUWtp5U5z6kzqOsiXQqTImaXLXs5qE428Yqrbd\ntqyxE+c0k2NmCCEsdqBKl2BY/M+tK5yaKgMngfdzRqVXdmKxwuKDq4Mwkzko\nYmYq\r\n=Y7GB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWtDsyz+maMRKTBMg2yAlseopRHUU/YhYcTrI5AtlUxAIhAMc6OA9VavryBsKshCjIAYBb54KwCKakk2FE2+hiPHll"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.2d736253.0_1615847742145_0.8557742484225133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.7033124d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7033124d.0","@material/top-app-bar":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.73a227194.0","@material/elevation":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Mv9HIEI1V4ATjK7FAHt+rngA9cdzc/ctkd2vBNxMYg7rc8rLeCjwhqw75uM9no00QhE04L/rJO5IFfIqNjmRbA==","shasum":"9b17a296ce1fb7382507f7ac1aa66552403989db","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.7033124d.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUProCRA9TVsSAnZWagAAS9AP/AgrCB3Rgcq3FngyAgfv\n202PmZhpRizmgVTDMfuIpAHrU+35t0EwmNZtIAQgHTmy2GNG1FZJ0+DUSvvQ\nwIOq4jbVonU0hVhHclYBbiwdRZwIejk1eRnfxoFBxmY6NPggb8Vvd/yJpGhV\ndjTswK4Xb4BbumWzobjoKWVAvg95bTXGZrgHr/N+r0bLIWEptmUwsUJWHmTx\n2iwKMZ0ghe9kVMoiwL9gEYF97FlHukvs0mOxbvas7fUHfKQwmPblqGYyBKJ2\nIZxOgNDDxzeh7DNJLtGN99vSj8+TJz1Y6Cqv31/RBOZZmUSb/9fxnii3fRU2\neZFOPgpVFA6iC5ujfFCvpo5f72q7FQWZPcS//D46mwhKlw/hL5fdyKvZ+54K\n8lTA+6mBIRh6Nf44JaJ5+J3pIl1XsDcfOo1Atd/LgLqPI8ev8fTQqktkSed1\n3ejydZUeZmZxZKcAQ+w1SvyFqr4qVDAg/JJWMAvS+pNRU2VknqUdMchfM8Rr\n9N+f61S4R5uUQmg36Y1f++u6pFbeKctwzJNfzkzY1Opr24shR7dYmtA5UOJt\nhfMgaL0pcC7S5O0/+iFwguLe5IQvOcAfdyxpKJitPDKOhEEOKnLqqryPUK2U\nvULNwT43MXNd9Ymd1QjCKyFmjszMXxVeb9h+DL8hjT4qaite4spyjCf5z/A8\nSnyN\r\n=87F4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCITc7Fyvh2ZXwXaLBTDEvrU4MbVvnf7e6b7SzdJrwXJQIgGlIqUS7zMgxrsc4oWqgFVM8/EXssfuzmVGbYhWLrbxo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.7033124d.0_1615919847769_0.409846395544494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.6c0ee901.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/top-app-bar":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.73a227194.0","@material/elevation":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JOi3j7Z6xD1w+PrvPiVZM5s8h6Gxr8TtSyE4hjz3nfCoMpjD5+wFb+AxcGQK2p+/nGO+bAk7RBHNm3lOJqKooQ==","shasum":"27911caed663097abf2343a4ad68155c202597cd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.6c0ee901.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTN/CRA9TVsSAnZWagAAWoAP/Rqlm8IB+nZns69FzzUb\nJLltQZJ4gvELX5PJrS+4MA/Y9nsbc1igcend6GSvorhXdyI+ozxBCNhV158D\n7t7HBHkNl9igeVaGQ1xpaXhDFUOThoQfeyF8k3d1LmbEwWf1TLk9n8ceFO9G\nI3nOZut0iQKPGk6nbrYohLinvkgEHfHrdIAnJcATgEG7nq2s3xRI2nm7UjUt\n9l1UKblH8ByCZPK1RfNrmyNG+7IUKGCPZjfxzB+C5AG8ZltrgrdBX6dZ6bda\nIT69aYEw4D5NqxUmKmz0/XIxIt0PQxT9w82PnR8TNdhZxsw6uPX06hgCCMr4\nBKg14mlb5LLsi+Y5dmJUtnQ57q+EuzASkf5nGqFCTRLrpNRGUruxRq91uKYg\nqINwPaTWcruhwl3J+YoQjJkVH7W+QnlGYkUG54CUHl1SlOjLXUt8ALz76c0s\nz+HuIM8bPpov2lMDyw+NoH1z4ob5JGW1GNxbXVCrLRXFx9pZzreWo9GDoE7Z\nsQnyRJ4iEJ45BiEbuLUiuKVROeL92ghzogYUVJ1xm2PzeqoP6ptS64P280bp\nwprBaED0z3iPNPSsva9aH/yncVs/c7hw6KO3QK+9lWYgcnKReC6Rvbwm8CV4\n1vI7EoEejiMlSJh40kvs+0XCM/8qrLiB5ANatVSEioInvah7UBNYsLv/Smlp\nBMDY\r\n=Fo5e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGK2qvVRtyQzg/fqjoaMthotuj3RPP8eobmmf+DHIlzrAiBjsiHZIfE76/ZINwOleXc5ThYFGCrj1ypxrIc2aZkKXg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.6c0ee901.0_1615934335359_0.6701055896428694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.7f0d605e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VRuUGllJLDcpX3vSycm5G3eNj2VD1jbPOPVkFUPGVOx5gX5L7LXA/sdUDsJdK5x20cOoMhzedoF9ZOE+KbVAXw==","shasum":"114c3f524c69098db450f6868420ca6d926370b5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.7f0d605e.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkSsCRA9TVsSAnZWagAAOroP/3Z0TlCArHdo7OCo4f3Z\nGMceVHgMD+Lj2eEv48Ghi4/BWpEwqSWVoFcLtXO05JVQ5KyzdKjmTY02gwTg\nSJz1Y581yvINc9/MbUKlkdauiPRbKWUbHzl44n3prfGwKF85ITCPw9hpZVAu\nnStlUpdH/P/F4MzcusdGq1GUTCI9KQTkzVpEwxxgK+2thW9QW7/S95QrY1lt\nFTyghe+WqXZKMAqo7Sp7CzrKsdqCQMVyBjLQNVqabbkeYMrrBW2ORiDZ77gr\nnkQKecM4W41cdIG6owQ83Vplqc9JJmdiBWbOlJHji2YIt3oLeHZkxG/m/9Vr\nuG99ZSObn9h8Vf2ufMwC2ycdtPihvUbKxwC714Q7Bi44EvEhxb5Hxz03Tt3/\nBlFPxm75awRS1Ccet1C2XqVvSH/mSUABtMx1BQLs5rDh5nqX1OyBsZDMfz+u\nOg4OUCMdl6ACZUylSxXrm2xYgMu5yk6srDQ6uV0jEE4MlHGmCp/9iLXWZIvZ\nxM8l1ThgN1Pf7nXD1IpLkB3cnivJLAnXRVJs1+Q+GQ20KFH3A+zN1Qe2WCFR\n7ZMhxJA61dkNM2obEsyaPbO5iXpyVZ15daNpWfK+LQw3lVyFRhuq00FTd6tz\nXmTKco5+yVgQgQj2no3FbuOz1J64zecDQ5LaCDqlWzgVccqMQjLPteX/lG6S\nLzei\r\n=tDhr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1+SiUqkDes49u0Ka8ke2fPCT/wj5TpzFRSnG+76bTxAIgY2F7fFXpx54J6jxkjwSa6zJYR0seEQ71nTgiVlPLm4s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.7f0d605e.0_1616004268362_0.16923612035546487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.572107b5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.572107b5.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+xGcdTtgv2OIOx7pZdYFFaD5MQO65xSrqOjQDBu4L+aaDzE7VSIK3l3QecosOeRX/gHOCsg6VYDNwUn/BgD+yA==","shasum":"71155dc202f52fe15e255ffd062e2f7d56278863","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.572107b5.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+gjCRA9TVsSAnZWagAAk2YP/i/8SAOVhJiry5MUw3RY\ndlV6RCoZOjIxiA0gQhC3PLCjsvwQplZIkeRX/567Epn+8uZ06kfVKfDWkp8L\n/D0d7zC8DaK9rLxWBaERdqD+uO3bhZZ2Og7i/BSdge5GUQWpty9AvJvj6u/Z\nyu8m3L0IuUMe8ggq+1IxDVoiR7Y4LPlowi8MCwDf3WCzQj6qGcm7ZurqGEM0\nSmne/QVp119egTHhEXEbQaexMUCxkcF81s0d+lzLy1hEeg2qTtWX9RvCxtIa\njJNL5i/o+LxTT5jmVIC1qa3lv6zlTluoLrfYHrddavJRYRGQ0TyUpmw3OwqV\nBdoImGTtQdtcHMu1xtozcrJ6LNQDgShqu7Dp81MX2LOAy90YoNRRqwER/nCk\nqtLuRobuSHP1VhdN4JgqnX46HsSqyvpAShBgVSni2EJmQcyua3hcKY73O3CI\nwzRZbMQ9dXNMuAFJ0gJVAZwleAsFNw5UxIOgKjxqOHa/WOKlacYdqTImLJ5F\nSY11T9Rqk7Mvp/LUBqJlsFSALYKEOOfZ6V9/mtKEiMDCDiIu9Z6AjJ9WSsX/\ny2hnLlUMZ6MxndsK5QSBAWEzMWy+wSUfMTTNMFfZ8sFRxwYybHM4UHvZx4GO\n8RLhr/CeQUz4bepwZoLMF//rmk0mIOvuS7mbIjuXb+cQa085zrWFGGJX/3b3\n1lDW\r\n=4zEQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjiyZQBM97fn4MUlav8qPsSiCZre4KFfLSFQB28H4y1wIgbIbuNUQT6uekfnjPVFPmRAU9hQWeIRKGB4143aagnHo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.572107b5.0_1616111650468_0.7939909537653385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.b7b220b1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pLSKYR9eu0GXPZuPUGcP4BVsAYIZQCilfFNZd9qeNjteh92QRQyTXUk9/QGqX5RCuyR+QYcjgq7Ldz0H7MG6bg==","shasum":"e3dbb545e0d0d6c1b06aec8fe3ddf6f1cfc0ccc5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.b7b220b1.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+4rCRA9TVsSAnZWagAAu48P+weNmK0F4+NFR7lmcOK9\n8PgPazDa7NNAayY7XxANsI4sItKr+mBDDQ3q2YDF7C8VO5cM40YB3xfzT22C\no+32VUpZfdMUPsNop/bVOTma18b6g/XqpqFyB0PkfQbL35NEG2AMdka7mbKd\nr/6PFy52J0plvlYvrQR1OS7UM/JvZsaBt+mttbRr6h2UxAZpcnC2Kdvvo+q1\nuoDN7HBb6A4pC3FKSBuClQ6rk4k0Xr87UIJ2j0VyvfvTRs89rd8c5VxJLxkU\n0LMrcCPdM0T0RZYw9UCpAAcCMnhtdUJRVE4EH6+DTx8BamfIfY1GXYWK6Fk0\n2HVCagZqm5z2sJyBkbzNOIwqt7qRn4hnUI3UMq9FYEq4Ee0IpufnTWa0erov\nycUxn5ta8U1GUJChnun2rVHk8GoAFHg/evrgOVs1DxsnPXe+WLGGeDp8u2b7\nQYSNjnge8Dtdr/FJpRL7DRLD/gFyqnPIspEiZIifh1TLKelZ8i8tTgB7FZvJ\nQysCyxEOBY6Pi1Lf4w5sE36ILYn1AIqqUX/QLTKrRGiozlKzjK7cMnG8YqeK\nb71+z6xtvTeRQ+3F2jhHQhLiAdtipNZDpN1ZEOVO8kBp4KwKr0kx19LeCFte\ngs7qWBHesEwYclDQyX8SwGRXVyBYjFHnSGXIg0PrTrGdmsJE3pOqidfY+xC+\nAeH7\r\n=QjYr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF+6MIGNQ6SH3lbAVhgX4QaH2bzapOwi7PbMYacvyfiAIhAKSGQ0hRNjAhCoSLQmCVDAgyhzDokIF3j4LmX1zcKVh1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.b7b220b1.0_1616113195153_0.46204128198231187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.233b2de7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-V9ABDXQRsOjXGakpte+mPuW+bG2WBZ3GuAdGoSLiNgmu6jjdO8Yq9/Ys28MyNGp/DD3xYuvsf9+B2YtTPCcisg==","shasum":"254f0385da684b3df43d7f6613c4c132436a1a99","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.233b2de7.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2gCRA9TVsSAnZWagAACAcP/i0UUHwKFVY++DZ/U4n/\nc2YU5XVoFlhfNN3dU06UNbFkINFs/tsTrWNXN5bRQizQNIkSAmAw4IoByCa1\noEAxOk/fYjktIm86FPyJJyB9T43xLhesADZGhpNjV0lndrlVPgdEsXra3ujA\nGdpO4B8fDXkWUBixDp2pHO9XFzxKuk6qb88I0sre584vv5QPjm6lgMBdoduz\nbm7G3nN//0nsvGZ0y2JpLxAIj9C+hVmdNgFWzchNzxpkd8LjovCwfvlkgR6w\ndBTwPOlC/Yoc5TAPs5Iqa+JKWbrpJJoFDMF58QpvR0o91YffWKgXrMhQL+1I\ny0x0/LbORVvDh3CrPYeQvjOSBexzOv77YtFCxD7H0DpNpGuJd0F9XfBxkW2W\nfm4+Cc2MBxfy1B5fwtbtOgqTsuOUlnQ/KjSChiRrFVoWI62bgOxQdL4ZwwTW\nhXsoKvD/fpmbBeym7zt7BKCXcqXZAIpF2k5kJ7IsMEPw8ixpO8he2ceNrGHX\n1jcX1PYggdrDDze9E7oXUXS9fOT2RGQ9RZGY+55Z4xz9KKNeVIVCgOcVokil\ny9Fffu+onTqOVHGpQT4xhxOD7v9FP92nShjW0lC13r2em+dVbqabS30finVK\nExBiJ7S9Aq+0GYUQxvlfWwUK6ylmA7MAqEwgCbGSxOLLiszm6mCE9gEc/3sH\ntKSp\r\n=ab5c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPwUSZEE0RFLwIWSfm9bYfITbgzuVTtcyQC0GJhdWH7AiBJ51YipgYbwLv+FilpPxrzYR0ym/KjfmdWpUqcxlYb6g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.233b2de7.0_1616178592257_0.21977475949157244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FH2NHIp3jF3YarbStlehB8xtScoTEBgMzj0FMTOtEmkegxdiQdkM6F0AQnJuGWQ2a1EW4TlRNUzP/uCssOvsAQ==","shasum":"12db76642de42220b832b124b5e6b1505a0a33e6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.0c1a2d97.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXGCRA9TVsSAnZWagAAlLoP/0Y+kcw531jJGFWmd6gI\nlvlfGKsmZcgdSuNM+OH8Fvs+v4uEBMDsUDOKb4Nb7EPUEdIzYFqMoC1zDEV6\ncIFoEf84LINwaxpFtBZlzK5LSPM2RAjsSsQI6To4EqkuYWD4K4qJuvy6SUVf\n+rjT0r5PbwODhKqfKYs+KjltA7rejvaDwR9vNRr6Y0IqiOPh5Y/4jvLNE53/\nqNM5v7csK/NFdk23QoVpayF/lvjJFTBrGs+k/ZJ2++yD1pfuVIKpShZXTqY3\nijLVkn0aoXk6+p5sIsgyLd7b8Ey3YFn5jWaAiVTFojPM9AH9vlefumljc652\nL2RZiS2WZNSyY4qp0Zk7ZFtuXtIpuipRLLW0DwP5zYtvlkf+lZaDnRAbYYL3\nJLTyfU6INF4GdqEcug9EXNR2Ak1QUqayJVgyq6ABXyPnCVHQTAxunTYQyefw\ngEklpEbeoigSJLpYbNMG4XJg8xkwYSfWF/D93E4L0hNm4gezGPhgdx0LZVkc\nzOlCYyoUf90s4vPZx/cbcg8nVCSKbnn/U2vBVOovfAaD/q3ydzPfYLVeZwVA\nEHPPMRaxIH1gsOE1ucQzWWaI2iELYnaBRT5zKPhR8hENNsKta8noLnIDIOUb\n6cXKD1xNAp77+unnreGqgndGXBDsf+ZQ9KWz3RVthbajJ2AReWJrnnHGm6EK\ncOBP\r\n=sI9y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr+mbCL42J49UFFT/QATHOjgEthoxJlxesLPyK9dEJZQIhAM1lm0CUMiYOBsXOIOyOZ1kSuvLPQpPg9wF49ezaC7UG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.0c1a2d97.0_1616188869704_0.9400043022251536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.57ca2e73.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/top-app-bar":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.5f0fc444a.0","@material/elevation":"=11.0.0-canary.5f0fc444a.0","@material/theme":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-irWEFBZFl9EylqXS4SgiJsphB7j2Y7e/2sKK34uArMEMjY4Knk0BHh4pdFei98V0kzRFOJ2s/qsfKLG/xzNjhQ==","shasum":"850423ec7d7a9d8c8d76123632df2acdd2ed0716","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.57ca2e73.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVShuCRA9TVsSAnZWagAAowIP/ijvVjGbQTgcwDnkEloh\ncMHY7JqrvzVykYp/Q3XU5GcnV+cCHoSWeT+U2l8brk+onz0e/mcXmHvYo8ec\nwKc++QTsgYxuHaaeh3LzaNuqAOA5ORUPl8ztsAelKQt987xgyhHp8ge00mcc\nIo3n8D3xQrAV2gJUftIj7SIDhDJcV1mEi1gE0pLxy0MZUkv9VdbYOE5F87SY\nQkEIBLVBui68ScGZdHZdGnxziDrySCeCAPu8Fp00qlLGU7oLkcbK7d3QgdUG\nh/NKBnvbNO/AzY3gJ8fGC2cxXX8XPcrDsBqGHug0ysO7g8F2Nwc5mGk72Z/V\n/ufFqjr0gFEiIjcN1DgyquNb6qPO+lwCqChax3ycZIslQvgcmSRR8osEdOqh\nFw3WX/5EPMvlxwLj2kgXfravAl3oMHfc3RYQ5fKkaBr5/jMuog1sytZyZrMA\n3E5+wwduRlGXBcpvAW3dz14S37QZdb+wik5JfA/+S+v+Xpgl5oaiWF9w7J6p\nhWois7kIOJZGGJJu3/M5ykoa3RlnlQrzSEkrGPbuiBa5rZ+afBa8lzzThOzO\n7ykXbJQM76N/Ko1iY2q5FR/TmGa/tpAQCOpXpqt4/5a8J36Z4c7eXffsi65q\nx+0sYd7GzoycGJD8T1DxCWzC9mhT3Xu2M66gSSBN94NEuV9lxc9O9nBqye8O\nf9gi\r\n=RChV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwQiXFAlmoS272nq9mM+TJnbK0GFX0F+WoGeQky2FIIAIhAKhBaomL3+MgxIY9vxXeTIdZ4ByCUrlVt4Qk+NNqJiLr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.57ca2e73.0_1616193645519_0.30987179322703895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.5c058f4b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/top-app-bar":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.8943b991f.0","@material/elevation":"=11.0.0-canary.8943b991f.0","@material/theme":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-APDRk5A/vJMiHUi19e/q1sPOg83dY1vvEi0Mi1Gg3JyBqMvIoTQROPxKwFCuyS/Fznd/oFNJXinm9G/GEnnEWA==","shasum":"86a68478537b9d532457821c83dced5550510409","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.5c058f4b.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTnCRA9TVsSAnZWagAAuX0P/RwsacR/Ocj2kR8SMIR6\n0Ht9tI4NfOBjKhPV3LfPGt4N14+bcs30MGPfTybQisCSs2AaIdiH9pP6PIqh\nOPNZxshSD+k96cDGVi6aNqooVM8h7iikyiQHQmoj2e0rGM+h71V64Me3Welm\nX6dpyz2whTjaYLMRaOyexp/VQPn6LTm7MVg3Ke7AUQc4FSIMrsRcXG64w2Bv\ns2wmtsrxnls/zbwzqF0e5GyKg3/GRS15PEIXXyrYGcw7TyrQ0GdIHwQwyDVa\nvLhfkvzi0jZsXJav57A/2kD9tG8srqT4pr1OpGOyBlPO5y21dFs8YnKaYue8\ngFg+1TAFxaw8WT+5rlJFMvxI/Z0SEg8/wHQkwbuEUkYSpTFDywrVHErb0nCp\nhzEcL9X8ikI9f52DS4+kPXeA21vLz066vWKJM+eBbm9mH3uV/sUy9LO6cDxW\nBYHOZzMiaxUQIJKfJK5SLm5MECM0dU4425Ju0nkza5PqJiDcFL9S/PvgmRSk\nE1PSZ9gdvBMIlisDh4E/9doFdDccXuPfP9kIrIBqMkehpodSnnr9dOFg1x/N\nWeMO91Za7aagzA+IRHL+fntDRIFTEcLHMOyCbXIOext+8usznNxHam/o0vK0\nr9jMhgETa1aH0RqynJ4snxLdvWv7kgKXN5aGvWs9KZS6DKQktHF9LzN/wRL5\nHNKK\r\n=05PP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjJUdE+ESrj9ob/+1uxIzQegq23s7xZ9r7H4eGBwu1XwIgfnXYereDsYqalrHfuZaSKox+Wu9nUcCClXDs0jj3L2E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.5c058f4b.0_1616540903329_0.020651108767195447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/top-app-bar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.dc9c84023.0","@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-qezvCHSsI1rVLQfvoJvS6ijw/0/bIIHHluareNEGNNoMfPc5Y66jaDApyE3NSqQ6I4pfjtlO3onkJlvOLsNx1Q==","shasum":"518c65151b110a2b7f3b617ae81f6d009a753ba5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.e27ef7cd.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4XjCRA9TVsSAnZWagAAmk8P/A6ZGv1aW8HFGC+mZajj\nD5x39RT50HjuUjyn6CgjQ4v2evK6pScxHkx+C07CpGx+a9oelomADfhKG7Vo\nx/1z/TPedv0F88km+AyUVBLNjgaVz2izIvkD6AzNi3+UuGVCnU749BBkFszP\nW1J/YxyVD3JKjIz2bjkRVDNhu9wSCuSMLFvy+xBJm/1JEly1GzHHRx0D4Nv1\np7FcjyVkJU3jGWZsHilayAd6l6g1gE7ADcR4yOn6SatMeua5o98hatG8kCJM\ntqVg4Ju+zYdgq2/vzRfIcHRM1t8HXPjphxieeUwLb2XFXilnLMTcmBEdZtGd\nsAn4L5ZqSd30CqHUGT/aAvAKnXEobiuARkcLcozFmo6iUXK/WUGktEZGSm4H\n+44cbJP5xM+6xjGnXuiAwAZ+5/eDGSKD4O84BZ68i8higwKIqR34J4jQW4yx\nmQTqZ1fss6w98BbsLsiiR7MAbdyZgmb6iG5uIepjKvNP3zOlPyb93S2VHFW2\nxuK5UYal7DL3zp43BWZOipqS27VTZYKj9f1R7llczzohe7SiRDAtRX58nwAK\nl77Od1/PFhaTl7GzOauBxe+gv+uJtHbjoPji2JM2qzvwnUgO5Tna7uBJJh34\nUjO7MwzJpa/OpudzcbJUlX6zI24M+uENtx/DT5zSdM1ReV14qAZBtkqDJWrs\nEYKy\r\n=tmW5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG6oOel8NtY5loZUildQIr7CszMHbAzd5afxf70fYQ9jAiAKt0NPFAdFP4pOuCvqQBs86oG9IICgkdYH+VFxHylBvA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.e27ef7cd.0_1617135074562_0.893163720728896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.15c09e74.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/top-app-bar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.dc9c84023.0","@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0HU9yd0dyVZDmFl3bEUEwLuN7b22B/vWL0UOaoDXYsTfjiqQrSVNgSFYQSladPAIhjmKjWpvorjTdHFGN5Y9Gw==","shasum":"2313a09ea927bb1a21727caccf580a3b7608f491","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.15c09e74.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKekCRA9TVsSAnZWagAAKxkP/27irUX7F2R9m8SH0CO4\nN9rGFVicQc29AV5DaUewsga5bCDQSp+Tab9mTxk4h3hoqHyb8FWGeQ/1ry6m\nbf5OwS0T5rW+0ZfQYkoCmOyvJUA9MvjBGgqBfYFchLJ2TpwIMkNMzbONIuBQ\nNYAltIecGLLvx/g3egMtl7jCMaT/EWHKtmHWPJyvdKuGtadXpDu/EkDUsVMC\n7mHMwfOsNreS6nj3Ldcgw1P3EKB4Pi/TrTradYatywWJGCPgQW/hQSm2RWM2\nKj3LRna2PKdNJ00kxH5iQv/1Ry7mmyWFoshRJzzggTPQy/c43gjb1EYNYzZF\npxZYpPe66MGGCLxmMdxHzGHr0c0MRFzVFz5Pc7UpzPE11U7e7vPfzeogp5WM\nItXR5CVi9q1mDHMpIgl9iv6syRJHDcNQLPl8M8wbKXD/ncpi5JH03NN4z3bm\n0lMthRI4C0bG5to3lgOAW5yFc6BSxXvMhLgTZ8H/HCJgFw3j7nczzDW6Ii2r\n+KPdbH363J12jZ1iW6nTBFaE+1iDm6dB7kk0trAuT6wCCrqmEKBdCNerLzww\nRWKmdaimavOwi5hNQ2XozrHoz7G1neO3N+KLl2lZOpj1GJifDG6HN5cQkrbv\nZbfS15oYV8msjOIxuVzUqi5K31K1QCAxAVO2wmLrB41xrKp9J+2v6Ako2cUY\nCis4\r\n=zyuU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh4oUZRc1kKvtUMHlh1bpYHMLFq865gzEKVGwlhI4x1wIhAKbUNAQl1e3tgd11c+E+qHfFNsMLKLS6b8mPzDzPqzCJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.15c09e74.0_1617209252299_0.6120247534908714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.4dc32be3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/top-app-bar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.dc9c84023.0","@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6irIlJR5gBJd5LmTvMab0pe2xZyVMcMQkCZBAMKVbxDC0GTCXfX4Y7yGB7zjoX3cwH/WvQ8s3JLiPhzGlGjRFQ==","shasum":"2d9b620b034e690e480ddf4b3bffe37733eab317","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.4dc32be3.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQo4CRA9TVsSAnZWagAA4qAP/0DETADNGU18C+auKKlN\nOGMDUB5UwkqH7GAW0aO543Ep5vFIMGX8whNKTi2p5kQ6iC4cXIWFiEbcMB/8\nRjHAiuHjB2jpPLdeV117do3KlHI4OPlYqrcjbFK0SEhEhg/lMqwfUHi5Ongb\n5svdI2I8hOAawh/kXKi0oBoaiup7d/B3cjAEsp28RqLUz4hBxm+BsuYcFyTw\nlpUcS+QJ/2LZ1vvVCCElfSW3QLZDEJ/H/e9xVRc02+IrXSZfdxbdFuS53cHd\nDVYJvCFp9D69tuekFsiPlv4/LR9EBGqd41JBuALSKe8JTb4PVxwKqp47jWWk\nAtOHjdeuxDhdIB8cM7STNE1oIyDiKOVfOqxDccEvdagKKJLhSiA0pg5J+jqU\n8OYW7QJejoPFSVRhuy+N8QyHdC3NBMMvlJao19FB/cN8qBhN7uueGk1zVExN\nWpgEJwJDYVtWX/Uf7MesPAPlhn0yTTCm/dPHq1xRXhu5cnEOFqpgFLmZwwrA\n5au6ZVWVPEkJtgYhM5hEIeYP8G+2kbICqSNCi6xcx9IzysCqLz7svDDL0OHu\n2JGTHig60jhq0G7FrHSvthDo31rF0d3G+KOBcjXWNIBwjxhcH8Umz8Eihldj\ntqnZ7sTEwjN93XRW5j//+Ufs6zfu04s47ssdJI2FLDLnveg6tdL4aA98OUed\nxUxn\r\n=npRj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLSkiIeBhVJqAr5gaY9s2H1cYz6o2tOxj1oa3m6sFEkAiEA5gmqsg4IIXGBQTWepo3foH9NfqZ1LGWBBRULfKa6je8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.4dc32be3.0_1617234488132_0.9622554096658866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.4b717f65.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8WcKnZqhXNfceaJIHJUWNmo4q/bLzLczovjcg2bzQspgV3jcRjVOIVdJNeCOegWKwau7Lb3MJ8iG0hPpY0SPzA==","shasum":"ecd0810736ce9b749d9b8f37a639568692b9b753","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.4b717f65.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg15CRA9TVsSAnZWagAA6zMP/1MiZVMRk223JbKiZYnH\nVbP7cCs/lOC8ef3298aioV14yIsIQaApR/Ief549mmcbCZamFtqeSyAfd037\nFIObFlMOdkyT211eHxfuZcktLp8v2ncwdI+P05zMz7QHYUsUANu0y8Mvt7WK\n36PLUe/m/pbRNbyusnoSY58M3xcs4vzhfXh1doY4rZQFCl8Jh7xB6i42NFpv\ngYfjlmaa319gl1NhYTy3CcAoH05Wo/2pCykNiFTpviN4d1Mf4IXKp7226QU8\ndX8TIYt4JLmOGI+vyISo6Vw8wX/7x+SuPhMeOCpcc5uARinOWvGOqj3bFArs\n1LQCaiK8cs0/ANkLyl2AZgKJwE4akK32SVbjS6AgaLMA3vue8T2P71gIHscK\nPUXaCbWWyL0Pm1OAvA8uGi2D9KMIvmQkZvxVROvAveBv3sY6BIzx8L8cl/it\nMKSFplbzCsXOkGmUSgT4AipruRH15fvrAmWer+odsePuSThBVWlcBg3QJJuN\nIcBuX/8OfszTNMgK5MZYpEBEO000rCDAHq5Wg0yFM5aeExy9IZhIzuz5wDeH\nTPAwQ3gK8rK7uJjFK6IQUBf4nM089EuU5yIVRf6qHu16Jyeacwlw3HNhwhBp\nvJHSvRbfe2YCMxIDPXryUT6WuEtVjjAIalaogNYzzdC/gjOb7txyKoR0va0E\ndgz9\r\n=sYtF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHirDmYibbtzeoupdmWOCHxgmdGqcilynpjm+9wwG9hHAiEA1nIdpT+w8ZpdLUMcT4udxo2fbZ09KK31XMeEYxw5vRo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.4b717f65.0_1617300856467_0.8045175716502821"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.c6870f20.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HWUD0y4bGDUUBvQmvQgmv7RXghe81Jd4TQUdUG/sF8Wbd2XOH3FHz6r3v5ZmmdZoatAa029BQ6o+vowlmjNcFA==","shasum":"0670207555723b6746922c92bc15588592cbd5ad","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.c6870f20.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpJCRA9TVsSAnZWagAAtU4QAKNCwivW/44Z0m3L6VL3\nmlrsinkJ0qC/18oQFRZA1rW0MRx3plzns14sOo1dAyrugeLCVDQS+7stAbBv\nNd8CwHih6uGYi9+kshKNoI70GdHJfWHH+PMsA2WXu7CCTn5MYVA/hBcD44Nu\n8rW1C/sglEvTe2BC0noehdDBxrZ3A4exw13XBb5bJXyuPYjfeHirHLVyuGRZ\n8a2yHkcWSF5gMWbjLt8LuAGWfq8Z2nFiQ9yB0uwcrH6LS0rrG/al9fY+dosQ\nusvCxct3siTCpZfdfVPEWTYMRakUyxGwp69exkPRDfeGq3TFAiakWPTSrheg\nAbnTTksS/ZnaXt2aI+FeaW00wFLj9LNWo/XMjEPns+b1j2cjdIlOUS3o7FlG\nW00fbooqJp3wNm1LEvJKut7A/EIK82FJ4czfUZ/Z1HzvdVZFrTK1CQiXb/1Q\npzugQAgDa3oc7vAzDBtvYTrDD5hk8PT0rTsf6TqxrGHOLlMe+ZeukyD8YsHy\nkrRMLj1lpri6ygIvzmsn23wZqKYAADjsyxYkEIbpWm4GfGfcfUKTf3kYxWRk\nik7cLx2KFz8NjwCqOXkoy8C33WJQSrSFmPILBKKaIdfnxD3OddRW7Zs+eDz7\nWcR3vW8g/LZW3NnuoGSMSyO4xykb/qXQ4/QMOKg82i6j34/Rp6Cg1vPm0YFc\nlUJB\r\n=cW/2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE9L7Cvx6PTpS0mPIm7Bew4JM22xIlhaw3zZ8oYg3OiPAiEAyxF6xkld3qAEPSswqmKUd/jandypSrvlbLVJZboEn5Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.c6870f20.0_1617320520546_0.7305536697251023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.852f873c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.852f873c.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DRZRYdhmN/Py6O+roAAF17Y9qZrJqMsMPoMEVp6cf+1iVzzKTcsGaEHQJAwtbloWN4EU82n2inK3q7BcWpgk8A==","shasum":"67cc0900b87fe5a0e0bab7b0c4b4f5715254cbab","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.852f873c.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqn8CRA9TVsSAnZWagAAC2MQAJ4inNMTjv6uqB8ZAmCA\nJtoFcVTTTT/Moj6EumHoHTs1YXNbh9fJOGHN8NEHZDrGu3RIAijKQ4ntNO4c\nWtRA6x4v4PVRfju6GpZTrujzrvyWek7kvC++Lq6oevKX2SsJDqvkW8CXXASO\nUyjq7LtS1VGM53c0y4AecepuQXMCG56SihOLvmd9M2q/kfvQ6Mra22ebyOeN\noo82S7d2IQ/NiZW1gSFa0cwNn5aNMWQyrpiwr7Jvec+/ApNa0unusr9sO01N\n8MRXMOA2VmDk+HtLjwfOaGQEer0lJKqV0ub8YyvKRR8VJBO2CYzcDM8hlCuk\nv0nWou2KLLuWrrOqYQoUVivW+zRq6UgfiYLq7gZDt5bU34OLM85vKsYb+xZq\nWwHesNnL3mVJHy1HngC52zh5IFxWCEGFnq2qZd+BKzntOpcX1wMGbxDwjY90\nk6Dd6O9qlZ6PGLKD4JbZrPNJ665IEsrrAcx2D6eW6Dtk2ilBFXzn5utOu/yK\nWsAxT5lQoztKhaXU8lggyggPY7CMjxRe0uLoTmjPrEnqoXN00kkprEyfCEaO\nkobIYDZfcj96nKv++CRLpnqP0pBaOs8DxrlWxJnGn3PzWYgwQpXQD5/oB5hI\n39Ly/HxhByJDwu5QjOd1U+OWUkQFr9b/AsCtijAKtaaOBPHEwYSqEw+7L3oa\niA2b\r\n=2pl+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEnL2dqJO8w8sutKG4FPRzBv3YVB2jSgZtjflQgrvIxAiAhcKr2Dsa+FSce1kllJS3hWAWLuEgE/3SPiMeG3BblYg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.852f873c.0_1617340923781_0.6293275634227189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.4a674a1d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PFyqg6XMzD/dK7Xu3DmpPu6r9ip1AW3tN/agDk1Ka3aUC5cgUTbsBvy2KkUgYbcxT0NYyyJyXzA1vyJ05oT7tQ==","shasum":"037a63d1149b78cc7ac02f15922c5ad423a60b9d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.4a674a1d.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3ACRA9TVsSAnZWagAAISoP/j+/3bRnCF4DDcQb2036\nzFqF+GTSoZvZcWjSDp7rKpX0gCiprLccfWclCaw96g5UEtKOS2PSoL6f8po7\nazCRBv2BxlGccbjemZgKeF5svIkRWBCGooa9xFBj5buVgo3lMqTbtIE9eNhd\n0fpmmwKhhXK/Cv2u5vHhWlLstrgUnXijOyB4v2l63bkrqZQFnQeTZ75pJg2l\nX5NnJrB15WrpAbH5HMFnjiPf4EOtN5ELColQq75WdAQGCEHpiZDdA1o5TqxE\ndxRXtc9H5kyBcLbBUcTxdC/Xd754mbO9NodRZayz88QE3S6577ECpH1uKYoM\nJyEl188hUjvV4GV/MxO2ab1GJs6i2MIqD3rb2dw4xJ2JWbUZc8Nr6k3qRR2Y\nhxUZaqsW9V4hDdY2YRwSFfBjbGnXATqbkGLJcp3v2yPMAP9AP5dk4gRlc/kp\nhbqu+XVYvE759lEowioArhsLFRUHOxrED5yJ06JXzFKF573j4qL/WOuk4hu6\ngZOjuECdppqQE/gyBV91pI4mS1jclEtToKavEM8zzKvtmCcLnoPhBKzt136e\nr/XCnqZo2JL49DEXB02gxMogoWOZGim9Fi2N/P4M0eyXdELG15ucFf98sI9+\nWFcSPxMATmteZjwIQ4ZV9JEf8CFQaoiBRSVzGfeqvY+z/0b3xLYuIQpdUm4T\nOScc\r\n=dshd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFCWQG0sYZW7G5nmIXE4YJmR7pEQWinDNM7JmCZNugmAiEAgf67DspU3On3j0ijzUrjEdnUs6hrkBOA9PmuksS8cVg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.4a674a1d.0_1617374656194_0.6063197718149858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-IX+YhlOOE3/zx7aY/+bfPFb4MnwzXdyXT12NtvZqfR5RaLHK74ypwZdn3UZRfphjenh8mGMx1IOxC7Zal8Nlrw==","shasum":"5ad47e6c860445cfdf02e110ef52224b634b04f5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.c5b29ff1.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03CCRA9TVsSAnZWagAAX9sP/0jHjxustrFheua7wbOg\nrV/rFYE6YjNr9JTa8w+sYp81Xm8feOQ8MDuz5lv1hiMhydsRCjVfUvb+rXEi\nVjw5ON+cnb3IsncKnafZDJnXoe/88/LIzxgGC9tLPS4aEe3SvH191+HbCNhI\nYsY+HIqLUjWp95FJeRHi6S9czf6VJ66j29JH8LxzBAlKiQJU34d9vWmEIM90\nLtX+9sM4m/I1mGwL//547RFxWWDxII7BpYw0P46b1llZdhLB5TgTBZXJxodL\nf6oIjLxK80WfBdwPVxM7mxzI5pVFaxdKdCoZqZAE+/VM1MG6tXFQWlByEPlH\nIUHEyry0nCBB740gkc6ivaHEyy2txsqTOjDcSGTLt1EMWGvdNXQW4/0Xlm7o\n7RHmElAqZFUIaLVijRgQzSIgHYlEJaW33cRpkcldjMRfkIIX3DiU5tIkgUHi\nvoSTV33MENqYdpQu7rUJkd3GipO50P5jD23R/jdKXmvLtPrz77tHikF55y5J\nxzF8SDeEBQ6UteWz7n6HweeqXRVYqFYAHkw2bE1PwPvYzBLfQzyjLUGbP4RX\nmObW1KjiFt5b6v7z+GE/phutjp/vmVnSB/DJNiDWBl8v/mD84pQ3fgHPd4zj\ny/ypROvS5u0M5gSaRBnXv2kd4ZjtPTJ0HrL4RHTXeVftw8yBYd8e9CRiXftr\njzT8\r\n=ST51\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgL3ML6kPcr6chH8114Xi9oLdJKhR5jr5hN8kMWd98hQIhAPmMQJ8NYRCu4mFscOzLeIdvg8w/Q37NcqBRTiaCWoC1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.c5b29ff1.0_1617644994541_0.4780746269154117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.583644a6.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.583644a6.0","@material/top-app-bar":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.94f50b260.0","@material/elevation":"=11.0.0-canary.94f50b260.0","@material/theme":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/vrXlbvvxcidIL7sY+PUa3bb7cwzJfIaCLa3ovjFZX1MtWyQ3VsozBkUmx9JN4nh6+7onmqPvFEyBBy0V7zwSg==","shasum":"20803cebb4f83828c125c1cc75f1d94f40b3fd80","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.583644a6.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04ECRA9TVsSAnZWagAAhoMQAJnGokzdQLb1duqxJHQV\nNTLGP/aBlQXIoT7e9k7hCecreiHfYVwCNyi+CQL8Zk29N3yhqr+KHqwmX5zl\nT0pXMw4Uo1dQyU7bKDxUNEZ7Z5SqM8e5wN5LlwDBim76pj/GPJx/14YSKqHT\nFaT0wLb53VoE2K19Vxspz9LQoZcuHEgIaZE5DA3DTCuBZ7M94ulViFsXv+uf\nhgyBMlq6AuEOPGCJM3Gg+k0PXbatwoEnOy/vEjGAkCmJqKP4voA5TmVkngKu\nCFCGvZxjzXsPbFXOYlVjvpJNG0/zCkoy0wW34ERFBhEVbkY/sRTotvMNeWJ3\n2jqH0vpJGwPgZbE6FT8RHxXeEsJVRuu8NZ3V7TB1Ih1xlBezDTGQkWynusPN\nRHOH9IDrtpcrt7eTM1QNtC763mhb31Qx3IZhsWgGyjdajSboS7DIpkCiWBHu\ntLGGmVrKxWQlF9jsn2Quj+xnyxo5TRw5CgJjMtYRWGAwGSQ466COhkuxxWxP\nR/zDHS+wrO0rpYqwChHd11gvpv2xsGVf4MyUrWmCLaL67tGctS9o7WyjiKq/\no4+Q0GMZgm/aX+CMV3wAMEaDaUd2qZfolmyc33prydqBXKOk0yep2p5BmisA\nsiPEwhxRmiRKp5lqecuVEhcHVDmEqnbcCbohq2/S3FW+6PoMlCD7u5wbcAqy\nanBU\r\n=22Q7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyKHLBHh0TMBlSb22lAqLGeCkwhCnNbkthHPFJrFhrbwIhAP6I96T/dkuLYwf7cGLMFBioh2CMjZ8EJSAaFOuw8KxF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.583644a6.0_1617645059513_0.6105848413775354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/top-app-bar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.15604bd0d.0","@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Klmb+6PjpqOD1tHrGzKSVm0MyOuh55t7aydU6XFSQ8S6TU0GDUDfe30oV/BoV3f3UtUhwgd2xrsPuS42Ccgnlw==","shasum":"bf7b4939dd440fb05b19ab19e941b1ce9e0e00df","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.02ac1e6b.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKogCRA9TVsSAnZWagAAg24P+QBo2kAzywTncMDrPxms\nuyue1MMk0RwLXq8dvzApyRnp7hccP9fscgWIgGDvy62qR8njDbuHEp2Ip2uu\nv/znWusvY7XZnLZcmft7Tanwo+NVicO4ccmzvyOaU3MHiLM0KspTjmXb4PmG\nBqkyTN5hrzPJUovSsSCjpwhGGRdScezgKWZ0hCT+qm9pxO1WxsoXuWl8uRXy\nBCujwuaRO0N1Di0bIeZltLgYh+sO6q4hMb7654cha89dzao0Ab8dK+SW2emD\nrtPCtjBv9RxVATnpsOEcT4udedVIkwmtcO0lqOwyf2sPLPi7Cz0YfanPk+4o\nsm8ZA1dr4Axyz7N3kCkcllv7FVS/jFl2Isdpd8gCsgoZXPl3r7CI0iA2FT/t\nLd0kNwNG8GPgvTTi30mY3ydoUgijFfa5VvqOBb3aXHCg/vO9Vt6GfarZdoFj\ncyULaOneDEY9qnTBrpLZFo6sTpxCu6laHD4i7NZ/7ko5c7yFm4TSp5EeF9h3\nffSkfbshVeVJ/cZzrcPn8CLOkGSyBU0FSh8BwSL0jBGseE4Vt0h4WbpUBMSj\n5C5h2lTBlhNQKbib6Q+2ybuR/84gOEsTjaRxqO5akJO4DAyIVWlrOcZQmxX/\nxbbyHbNYhU7sM9yvD531aLSFRGOtIROq6shLsPdvxDTiYpS7DLqxL2tkzgP+\nEqkN\r\n=+rIU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGBye9wDUHl2ujs7ut4ImTQscppfQpPPD9qPVNRDcVNgIhAJralj5zIYO9NhTtpikHcSMj04BBTd9SNrrqSVw1ucqP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.02ac1e6b.0_1617734175599_0.3635495257891228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.5ac5856e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/top-app-bar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.15604bd0d.0","@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DZIG/81kgTUKRpRVnXWWstiQ1Iq0IeAGq74LIDm3wlMc7IfWEetCFCc5Liix6FNA/UnvXcwiC7Xppx0l24iS/g==","shasum":"96fd9e893184ca66103482ec2511b0657a3b4720","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.5ac5856e.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKuZCRA9TVsSAnZWagAAd1YP/Aynxv6L1SkjN2vQfC3A\nITpXmAetQxYIB+HB9cTQSt+C9Z5MKvlEsLgNihA/c5Y4vAKaGFMvtizR1jQX\nHqsosf912ayV6beuQRuN82yyKtQizl53GhXH3asI9pBJrXyObIrYSDNRBbVW\nCtYxDZ4G0ZFodhOQRkxgZzT/InV83uzRs6k3XKkNd9xPQfo53Yuqvbmot6zC\nyxn+oDcsYqeJyLGTTCRhJDEMvrrcz7Hp6BcLwRoy84KiIRauxlBMhaNS6nX+\n0D+GYkkAMmKZeGPcn9BxbC3kdLJOYzCbNejUpA+8DCkj9qCGygRX6FcF/78T\n0Lgr5J77lqae/rbf62zsV/AAsM/6wy0qKKaWkrsQU+INdR73KP6elglECr1X\nlnJJS0EHhFDCoxOnMUFX6ic421Qr4pN6rHuY68kdWtbNEtzXhIIFYTi0XtQA\nPLaOPJcacv7+raqAbsy3mfmRrUGLvO43DjPKVFePDZgBn8Z8MVw4b4Ymwve2\nBrSFk7xre9C94zzTAQXYcn157mf8KBFNqZaMZrxzXbtaYbpx5Ty7MhdfNzzq\nBy2KB5W3Z9rw1kznzZrPCPAckiJw4MmJG5zx7Oap9Y1z0h7Xp8I0uNVk5R6T\nSMSdDOQZ8m+0vpUxk8LEkvWTAh3L1/lQWmDAlaRTB9qMUn/+svK/7JPgH7nV\nj5mO\r\n=d/XO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjiUeximIHngu6vyXB5scWEdcIHDza3rpeAFEG3AEKIQIhAIhu3iSLnvURTI39M4DSAd3xyCUBpLas0DIRS/udkYDt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.5ac5856e.0_1617734552879_0.35432918836425054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/top-app-bar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.15604bd0d.0","@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-otxv+5v9n4lZ3CCMzXxwQlcFF7JAb2fgOH3ng83zl2HC79IiYcccp/0ks5Lp/B6qNcFRYU+tsEA3hjo6WMV+Ag==","shasum":"6ae82e725121890e8363b44f531ffa12eff8c048","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.bb23dbc4.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLgCRA9TVsSAnZWagAAByQQAIE2AI3LjbcHJxvzc9kw\n6WpY02LrUq3oBmnn4IAaseuVdS2JkpUF9REAalozShOzuUmiAY0K3TPIINV7\nHdYdMUxdETp4iLK4P7EnZdKyyiqG9UTpO3UYyz6kuwCAarGsnwbQVfixzFlF\n5454i0SVhPxc/AJD6Abq6yCKTKMmIXT0qWyeRjMlOLW8NDBHQpVdWB/k3YGf\nfB5Am8uv6YcTIjc8smyei1Kq26IEpQD7IfVatGbUhuRbCEED+8TVwIKO0E/v\n29hHFvvmaVUPrQ1wVRCR1F8wiyI7pUMQrQa/qmd7VNI+n6mqRHgwJ55zn+De\nXeEYguMSamwaWo4zBB5qqpIPzlUWh8r6h6/apA/eYhUnYKG4oovG1wTRv+8o\n0F2v1zKE61KldqEkGmGC2Bi/rbs/uSmA44l8FO5b3NfA8YuozdbWKFrsgIHe\ncsyutu/9gsBK2n5sqWI01uawqQQBCdQ6vZUO6UQjqYbbc88V8dG2p27kYnfs\n6c7hkdYNd9z//TwXUET/B/xmdgU+Qt8CZnIcT4X+6zUL7LAAdp4lPAfAvGxF\nJzsCxyTLs01yE1gPc2x5uCn/qFMnGtSmNT1I/ensXEgSaQhImFNdw4iVTvOo\nqOaUQDdPFTUvHTyaigKpmKETX3UhxCtV/6jeQZ1leC+YTyxZUgsr0hLKiq2J\nBjYP\r\n=+SoQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGhWQKw/q0fIVQ2tp5Q+lngQfEXbwU3eOMhnVZpix+O5AiAKycY21WJwsSsOGUVYTS2RxBE2vqjHydh5h2s5DhEEfg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.bb23dbc4.0_1617830623658_0.15616471452588643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.e539904c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e539904c.0","@material/top-app-bar":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.c91e8d141.0","@material/elevation":"=11.0.0-canary.c91e8d141.0","@material/theme":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6tduvWaO9lk8ohfDxW45hK4w0NbqEF2KriqFaTDjGQPMw2G+yU1rse6itLRyo7YAoOdcTbwb10OUVo6bMDtYpQ==","shasum":"3fec0e3348c576faf4905b908dc13387025b1052","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.e539904c.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UTCRA9TVsSAnZWagAAo2IP/0m23ZrJAFcy/w1DKSzc\nAEAx5JPWSIky+ZIp0TBPf153JDZkZyyhKR30NKx//Hk661Dz8c+mFGK4hbAi\nz7PKrKJEECLQWzMCh5BN0FZL7GV+4BaLYubK8+pZBejVGwjIp8CSSc8yF9qH\n8DopLJfAQA2LO8qxkHHQZaEMlI40n6t2iitLAMlzFipOPwO4vgaMr6Cq+4B+\ngrS500xL2xcVZBDVAm/HY2byRHAGJD86yGgSbi0daoFN8vp1bV69F74QUN6m\n8F6CaFWOR2GN6MCGsLXjPUk+IWAhixXPhwRZtoAihhOJT/4rvGfVOw4QFltD\nmCbNbn4+hXfpM/kgF0nFEYWeV9JBGL050SSoYIoTz5YA8DtFsgOD0jkuDSKn\nVkFSqH0DsK99bAZWBMX7jxgHZ5Xa8wU7D2mdWgHvg72smgyNc2Hmdz0EfxoV\niszIRm4cFCIm286d4FXlxvJloCKsgyGUifovfIR4XAFwUyZl2sU8Y0/hnRQA\ni0+nKzzco1Gvx0nV/glQIGTiK3ZJUfkmET/VMFDD3lhY99rGqsWp1AyELezk\nU5LAz4KNYgvSVU/ZEzw1spfzL3a/7d0OR6ooPu6OofplANx2lDufVCEENfrc\nW+SUxVzcTzYS3EjnNTm6A/D2UFw5StgVJ4gM7cHqOJbKJXfBOWqelK7Dfmq3\nCyWV\r\n=XAxi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEKuuuBx1QtXpgk8a0KYNOf2sFhy/t7qRw4HC4A5+UswIgRsRyk0rgxgD9t1wnwrEjUQaFsJV3yYwNY13XB3Zr8cA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.e539904c.0_1617904915463_0.31057346720044987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.a93ae333.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/top-app-bar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.b2fa996a1.0","@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0CbHpFwZahVMwNFxXlmQqHJc6Yl7gb4lLci4gq34YlAgCD+Rbqz1TYx29RhBxERpPsVPgnpc4uU2UPnvmU0nVA==","shasum":"bcf74f60e9ce0e5e1c619e1bb6cf865f30f8caba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.a93ae333.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLTpCRA9TVsSAnZWagAAcykQAJuAdlhMleDizC63FO9S\nbwP5YzLQHgb/iWzNxGqg2TPVAbOuo0YEAaKvLyWUT5hBSPwfpMfc5wP1Es1v\nFNsG5jtq78Fg3ZDhCSRtJfrDGpTecYQS9vyrVYbOWC59Wpp5EyfCBBE3mA6X\nr7JExCHs6cs9AcEVh/12du/+4WxVCW4wDIDntQ8b5Kkx6boHe8EMqYisnf0+\nKEnoBx2B8HNzJGdjn1FFYJiKSbzI3zC4H8lNt1bsgtH3nLlzBEv+eOezYfMx\n/E1VrAGpdgE6bQaZHij7d3mOxsN+lD5tPqql6+8MvTJbJvocHDvpve7b3lae\nYNp17gTMjQHBTCAKmwJojwOZ9CFmUCb1AvQQeUMXmszXuwbbtuniFD0tbxG8\nS34ajDTFEGJ1Wwxg95r3qKEXMhSRpyykJUlpogxd9cW2T82QSHN6u3B6Py9M\nVkFX2lI0rqK3yUmhvJren04baogpWw2GQBKfkAgtezwDpr7caSvfQtlpZbJ0\nboIw13mcW6MGSKs4eNac4reIAl9fLpSrGA9p6cpiHz1gO3lxczR4Y6ZncSVk\nBGBVBbyWiWbONc7Y+ngzHb3LPgK454qboC5a91tSyKOx0asXDvHtw9DJEQDh\nCF9INmpySBfLHzMkfDOQIwc6OIc8nVQBm5+/rGtWQnEtp991ieO5/qVhAEGe\n0oCW\r\n=8uw5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ72x8YtarRCD0GHTI1AaGF4fuslwI2UN25uwHiJeC1AIhAMFsfbMoNEZvlFIcdtI/QHKIiWS8RMXrggLfQatqyb58"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.a93ae333.0_1617999080471_0.9674934650646623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.e142c144.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e142c144.0","@material/top-app-bar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.b2fa996a1.0","@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-k63K6eF1eDIM+iTRVSm2iz8KBgFgkzRWrEfT543a1GAZLupnnMWA+aDHnKW+sOqkRrmQxAoDryvQwaRzpcOF0g==","shasum":"7143fd2dc0280642e4457c02b00fcc4e845b6da4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.e142c144.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF44CRA9TVsSAnZWagAApqsP/2a6XrI1CaKiY+GDPGFk\nSeBBBXBtghFjzyi3rTZMk1nwtx+f3sz1CzHsTw8AJ+d9IHDgnKEWQMtbmatr\nqBbhFn3Mbt/sPEeOXXDhCe9L+hb5nQVXbbJ+CAG6LGlNaC02sweREpQSaoq9\n1m4IyYr45UdPARt0u93L2u+MyGPisCMj4y9SswjkclkMlTbuewoxnre4UzIx\nz9mkQajLECabL6mr4m2dAdGgMdOmArYQJmFSRvf9mP6tM/NdistT2cg0xNuP\niYeKRxJSNiZVkEoilswlpCFnuUg1FSHJSq7/wp5VDm+LXDdesTQ1hQLLfZ67\nYJSgW1m3Ql5BWB1XQfofkD6Ibz964V2iXClSK29QhyRhKtcGomAE34YDrD/H\nyC2F2JPOdXfvtB+F0w9FFMXw0N2hzwcbwtaBPtYl6tnMxP/HS5PrzFB9EUZg\n6Xhezutr/7aKHm2rV36BHFqVt9m5jW3og195I1oP7g4a5F9tDHpsy80uIcPT\nD1mnNl8t6i4ZQoHScsg1xXqFfHBzaeOB/eLPBY9kFCdYj5ARSdIGgrI3id+z\nyUeQvGHID+iXcDolxxxyngYUk7MpB8MvGzTH+Exr2eFjXnQm05pXHgbr/drX\neQsGdKozNpTj/eeC3eG2/JbYx5UqkBRgdd9ijl9x3SaP6RKkxAkM6PBN9fM3\n985V\r\n=XljD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGAE1HVQ5SNArneb0DZHsfj3QN95rTfpsFYJ7Edpddw8AiBbJzK9ItDCsDW1DmR/U7ARQf8RoG1AtJb1fewQjc/TyA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.e142c144.0_1618239030270_0.7765625291111908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.382d7eb0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/top-app-bar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.b2fa996a1.0","@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uuFk4jWpEOvEzqN/ApkWwkb5ZnV9idCWWXY5NXNFhtB7EqtLp1T1swladS+cR833x+s6RLcWLXs9CoV18aS1dA==","shasum":"ad5f99b3338effc939ae346f3aecab0580629271","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.382d7eb0.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQkCRA9TVsSAnZWagAAoo4P/3R1WxT7tb4pKTekIwE3\n/gu0RxLENYrm9qJc2kFOPUH2mMsHAQh6CN7ay9/9mmMni5u2u3YHdxCb5+4z\nVKZSbc6kw96boyuXN8N5VJFjA7TYf4f8L38bB0ysgxLJC9oktSDsxcY0EAuS\nl32qqDNsux4cDq37zm8Gxj152b2iYRUbnV8sP7gKXz1Gf9xNoM2YxzQx6Ouo\ndV/4auW9PlyoIfBIFpY+tD3fu3J6OMP3QAqKQMpKS4SsD1eAGjJ10WFapsUS\nsYD0+6LnHsL/nQGcLgegqDnatO+/TaFmkGWH+Pf7AW3RytjQZdritv53NHhO\n+LjBVng+8avIfTERSBmzbjI5JzYRP0I+nJQb0GjVzKJCyfNJUd3sYcVVzI1b\n3AxtZCfKYaJ2HPvhJqgPsRDPD0Hd9mRdAtt1kcDuxecIqRRcFlRGVcQ8p6A3\nEet2ZP7c4asS/a6JqLlnBkcyuJdZUiSxYqtZIQz5d9/9zmvhHd/8zCnV4ByV\npJ3kmeX5tb0BiUSuHXZvPqedYE38ye3+8ilnT27rv831xp+CMGSFPTicaLLG\nNdawQIiCcYOvtpSIizl9VBrLsifuqOU3s8R3I1aRNjRmySIYb5/THeayynS/\nq2f5Q8VJFAVuU/Mip6dKaW7BK4kCs7jmJGe0WWAZOycUFHFxTGYR7IjJLl8O\no5tm\r\n=ir5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh2zdjEEUz1HbSaCxkw90pI3fKx9/oumiCz2jv58iJBQIhAI4BbHUl2yGMQunEceY6hYWMMf0Z3RiaNo23iB+mAbZg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.382d7eb0.0_1618265123775_0.8666247901258712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.b16c7885.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/top-app-bar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.352b295c1.0","@material/elevation":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8xX5OOBidJvSYOVsatH62hy2jmHMgkz+1rg0P8gU2agJpRKEFIC0lGEBJQjGWeqGvL8v827RPHBheO9LjdZOOA==","shasum":"0fef1307ced65d1948d38d043600bc110172b4ba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.b16c7885.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwICRA9TVsSAnZWagAAaz8P/jKXpJvUnztAzvw9/VjE\n1KgJyeypT5ITBAkF3BSyKHvjLs11ivOhWZf0V53eDpY6+pQhJmyw9/1x7c0y\nTPXvH9xs3AiA0F7+DqyBXbohfUylO/HZ/l4qSSy2hiSmUeu9P0VY4lIAZj3y\nScsPXoZHadNhD7Cp0QPRLRw3JgbfxWFsef3fn1gmrl/07lJyzHtYsyaylmyv\nnW+yZhgAAo52mZ3jS/NVfhxJEXP6bTgAwt0Qpb67hJPNbM93X3RnUuvrftyR\n9AXm+gu49X2ezVY3L5NYqTEQcofTouf0nPBmZJ3s+2nhy5n4NBCcHEPRWBkv\nRx6fP71vk+xAFq7fxecYcBHqa56pFFpP1CUF+Z6p/9DnTD6nmPo6/qTjIxyl\nwjpg9fRXYWLXaYP65J08Wlj3fHy7cnSBMB/EsRruTiZ4mx9J1PTA+3b3BTzF\nQm0KRDVqQ5yZydzUlgSjZfEBeyNAxSVb8bru1OTzqgKgPzJ7WwirwT3tcggY\nuCG22kv1tb3Js3ev1Zea4nUfjyAu9sCp+0QeRCNWHFe4yuQbXIqxTahdwUFo\neVH+GKskGjUL+DNk/rGaciyyG+YB7F0cRJrf+51FNWMS06iPzmau7KAELf0h\nIg93cbNFNMfoTwz9Unp1bXpyZ17UWT4XxaYrCpkQCer95OPYG4491QFq2M70\nma6S\r\n=DYNT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv+JMxrSVBcOOZ93W7yC/1Vds1ZhTQ7iRpr0NC+ROj4wIhAIiLwNWd71rpMpoghQeanjtDkmztasq2AB/Y5KJDOUJ+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.b16c7885.0_1618267144146_0.9833105770753912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.0e92782b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/top-app-bar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.352b295c1.0","@material/elevation":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OqRUqqKfAUaor09lL5SFQpMFDMHYBKxQrTH/0eBeVz2yvufWaihByVJLEnUYsuO2EqYIXw/5ZU1jjKjUersmSg==","shasum":"b66ffa324e5f84b5f5db840526af3c1efb08c8b9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.0e92782b.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda2oCRA9TVsSAnZWagAA41UP/3DDubNk1mXpIjAsHQZR\ndeoyogCNs0Aa0QKaQbWvHEQmjRre2/A1QOEzMOxcFwPqN/9L2gGgv7dXrj56\nTDHIuZpvALBlCPHrGn2o67NKmsU4G3TF2sftLfT4G8qIsk4qO9h+dD/Hjdoq\nZIBAUsjNnnDdkmxRTVxtuWaTKFooiwQpTprPl1uAqado/cLJpyJAMOLB05cQ\nOqSuYPWGFX1eu/958CgBVd6/dc3I9oyPrCMi4dJjs3ENHE5jxbBhq04fcSBU\nJMvkJN4Y8LJMeRk/2w/KhicX/fQD3irkoR2lGz8Sot77FzZrpqfUOVohD5Zg\nbTKW6c6wC/kRx7OHXgrxosZyBkAD6hjNqaCP0YjIm13onOjwUsE/4E1IenTh\nQ49oXMikJ/1KXkf7z4BFa9fl0ZFotYEHvMgy1ecWSw3HI9UbB2mP8yQfUDzH\nRDUYdq3Kkzx/AhEzHhMe06qn8b6W93XR8WRglLezDVy/y2TJMpE+PwaIoRn/\n/XAJ7y2LWGTOhPINpIT2Ckam6ngVrg5DuVzuNbE9Ye0PGQkRDaMLSNrkExIV\nTkEM19ZkqnNJ6rtCTVtfvuZdL61uJSzlfU48vqsXkfU8L9Yu5R2QzUm4posn\nik3U71KPM+IaE8kmp4BuyNsEemCLzipDjcsOCNEfxafNgxk5UvXgDHDJtoHp\n8zR6\r\n=IkBE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgJdbgzS8Wao6FifNH2yw0Q2zBrf8BPHMAGGBThGTaTgIhAKD+MI2g6yqrG+ztzBTwXGaGidopYBbWFhK1bZGBnxqx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.0e92782b.0_1618324903718_0.2041688762062719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.70b3a072.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/top-app-bar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.352b295c1.0","@material/elevation":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6fBgFrt+5Jyzoi+TV95pi5j3Sxy71wbOELjlRqaxDHY5S8t1yqSpBxx+LoIjb9+qJ2X6U3CucV8rJfEA6y8I9A==","shasum":"afed2202dd65d6731bb94f4455b6d3374fa39591","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.70b3a072.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wCCRA9TVsSAnZWagAAqYIQAKB76ac0zqQhHQk7PEnr\ngjwKvjjokBTOOMGoTEVlIWb/ymwJmaTl9aK46cVtOYP4Fmt0uEYuBwua8Umk\ni/vRAR5e2H17k+g9j1vyynXE1461Nngg4tsBKrFKUASUqzzaX3WtLQHJY+wt\n62KGnzxVd36kSPfZxVLEe6qImUHjCy0vhlp5Y4wrJc0x8qerwNGg3pALgcLp\ndMfLW76KfuQlgPycFUmsT6wCb1KtoMOB6SXy7rY9ABZKtyVz1tr1ZJQ+UGHA\n8LeKssUpLEFIJ2KTeBc1AA9MoRWDFLVh5oRZeKBN2YmCBw8BNMhu83eIdDX6\n4Qfe4Ucm5IHtBT6STtFEzZeywZwNm/QQ8QtILV79x6WDojZawb9UAFKthjAt\n8Rf8GFUjbaG827cYxRuulG12ZvIluioj4VtZmg92mE0VyWjUWQxZ2cpYx+g9\nxFaGkxvTYqogHuswjZKIDrBKPkGz7CvVOd29UTroLavpwpu7w+jXVDbrd27P\njcvD+EHb4ZKcep1wdPkZ4PPfMaSQDWJ9B6xi8nwj+iMGcJ8xTVsPkMTcqkWi\njbR15qROHh1RyIHzgwUfN0Hs7qKBxv7srBFHjDLH3Z9XrU4/g3xo2woofX93\nvvZ2bhhKZu8hMPB45YTh+VKr0Sq82Cm7DO4hWjS4sbgXaYpQcNqflqeMDyeN\nkgbu\r\n=kNLU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhbk4TdAJMRvAJLxzf1q2TY3AEG7JOOa7ux3NSPRnCkAIgfs7tdA1j8oMBQTEtf123j09MgZUni9sbERfOYl3N1l8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.70b3a072.0_1618439169993_0.9730734111497261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.ff79b092.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/top-app-bar":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.3793a3143.0","@material/elevation":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HJlxxamcEyHPK8cM/X94Grxp46f7bc1REg6UWobrJa26pgLMA2DfdEz6iEV2M/uypnxxIR2BVFXFj+xDCL8rRQ==","shasum":"c416322ed9549e3305a0a4bb3c6af3c0402d9115","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.ff79b092.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0kCRA9TVsSAnZWagAAhC8P/2xHwz8cZa5VBPJfK/vp\nVBNGhj36SJWX8OsFqnivXlguEmmtuzqEaztkFUWi8EsN08UZF/yGFKA7Dykl\nWVNsE1di80Sfny9QGYk6NMiq3on9OD8SFblbq0FAHccWIh/hp/aCZYbrcWGD\nBleVoj8SWzhDjJoEON7eA1hVZ71pF2KscYqM52cJFa8wvvYCrjjHEIVII/zS\nEJh12di/RpO7MKkJLFV+RvP4zGoHZM+bxFgj81HKfzREDh2Py/itQ6BJFdkd\n/En59UH8wKlmjT7gj2G32bVsN2C/hiuVPkI7vTT5Jh5zmvK7FVjbTqYojs5l\ns1SNaTluvNcobYpAl+r2uwTyhvtNPekrphkvaKJrf0VaXTm0OevhhHG1nNgs\nw4DkAe0cYC62QvMIe55iXVt2o0F5kMsgKrdAA0k5AIAyAn4v9BKl0EjToDik\n04i1lghnruQBR0pSIjagkJWN+eE8fihVqVEmc2I2o0K9R04emjcCbqJb/bWl\nJaYw9iFPfxjMSFo+PHjG0XlLpYHcR6OpSv3xwqO6BUf1jaWeL4EV4j8B0Ajm\n12kIfkDEwRSYOJrYqjItr+a2TfAnoqUfcAzsFbjB6yE3l7XRPcf+2t54AJ7M\n1ipe9eibAJrheO/EglUUlft0/IcLw+UdxVNKjMeXKxkJjtDnRbJ+YqNkBfUy\nIB0h\r\n=f5Kt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwlNgP4PEmCvZi3n3i6WGysTld89ecJl29CrvtFP6L6wIgIL4UU3Ei5wLP92LyCy1XjaAEO2ihhSI/8ZPdjJ/zcQE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.ff79b092.0_1618513187794_0.9476753039915646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/top-app-bar":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=11.0.0-canary.3793a3143.0","@material/elevation":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vv2eurj8NbMajAjlwt8AjmDrbihco3li2GKRR34gTYmyw0DnK/aARo3VVuPcsqiiEc+TT/421UxVcOfJwV+TZw==","shasum":"6308382b21fbe8b122255d371c1a3fedf681937c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.f35b2fd7.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+WCRA9TVsSAnZWagAAo90P/RLF5MY/P2mE27tJFff1\naWYTRvOCeW3qfusuBDxatC26e9Km/pT7iQb3BoSVyw5Xx09ejr9yz15xXqU7\ncbwI7y6uyufVMa18p1j/or+DD/SroF17QMZ8iqz9L9JTLvue2+NkRcApheGS\n2BYbD8/9ign8KSW83OZJFytR4ylGdQec3Gu97c4cWkIU2+IZBvwiYw//3uJJ\ncF4NYc67TfLbWmnSbwxHOkuPyCEIjkB1e3xYzLXeTK3Tw5oPBuiLzo61u8+P\nwS+dtbKNUUxXEUOTzhnurQsKujZnl3qdRNA25Ls/GO+5cRRBWkBifQpKJR1p\nlGLTxHhs9UElg5SC8ID2flC6yzafy6BImbKgnnt5n9AEWl3VH9Gl6CP/gaJE\nTTEiO1auIdX2EqkpvizpASMQX9bLYHKKcXsWE0KG8hg8shqV1ouNq/w+4nCC\nSde7KmPeNVKL0dU0f/tRHZLLxeIzf94s4F2DXxYMieCFGskHqBNisItUY5WI\n7xOBovHYPGhT4R5aSpNBu6TsakeXI2iua+y9yNnFOBZHjhksyIvKsK41E5+l\n2SiOyCaLVD65G+m3gneU5+A1ouKuArNteRap1hiu4QxY4R1UajNNLJn7ESRe\nHUETw2AJkP4RQxShx5OEFUpiNxj+IfYAo59eEJ4AvO5xwHcfEpGgeYEmeyfj\nNXA2\r\n=pAXi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjPRJlxfVhsdEbo6dnjbfl3sFvgSKNfGePb/0Z59fSDgIgDaQwsahxt4Wl9KTq9WUWvszxtnfceq2D2rSA2oGsly8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.f35b2fd7.0_1618513813973_0.40454653322376366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.11977cac.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.11977cac.0","@material/top-app-bar":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f342c3f4.0","@material/elevation":"=12.0.0-canary.3f342c3f4.0","@material/theme":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-t/aTt+s/uuSCDHp2kskAUqiA6ivV4YCUqEhkqMdYC68pp2nci+3Bo146ck4HH2GRKa8t0o23BAQNsYZJXkBY4g==","shasum":"9050f1f2ae23102cc681bfb201884ebca0de0b88","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.11977cac.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEVCRA9TVsSAnZWagAAefYP/2Yfzb9KdWNc4XkCsf7Z\noWR1UFackiGb4b8bu9rrxdDwmmZrgDDvDHmki2sRdyQA6sxvyLRf9cdXuSUD\n2nhVMUAOEkRr4fwT9kVrKQDQQ/04otBQh5bmbNTV/8uasg1NOL6yMbXMweDz\nbsc/T1xq1daUrknOmd3CsYbAo0TkFw2PG9UQ15vENEv6smuoR6aLdviEeg4D\nJzdqtqZkSKeaca/B+t3dIWa2WLGBsFFnECqJkFJvLopxYjavqQy5bNSqB0rr\nhFiFMs/v0XiwIYM6W6Qh0mcT9D6MvMExyn800qUamajDF8SeL1NqXPMm7UE7\n8TwCebBN2HP0MoxbhbmALCQkhM+cuKcP6B0rIiFVceXqzDRXKHy9cYXOxcpP\nRlS9GNsalv8k6zsh60w4FBDZ/8Gd/RXKu0M69nSGhGETtQ2ztio+qRNStUNx\nWgNg7uIZzZXKfcH/psiqoj7joJmCny5C0DR+P/tk1iPn6W9ZeKbMpED3N+xD\nS0pAhMjOoiqlMM+jmDUhYcC80ePocMDX7ItCV8nKqcYaEbLj5YhbfBrqI1su\ndtFVeyMNh/iL2Qh7fc/s3BIDBFlATWvdrSvUHBbXXgb8pr54ZVkcNbffurl0\nwTXTEMvkW8v3Ud7182i5casRMaRIo7ZibFUAp9MoaP9LMfbf68BeUt2GPv1R\nLt3u\r\n=b+fT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCajFegXbFB4krc7V8iQ0b7Z8Mbx5nz5TDDoXfok4+ljwIhAKzQz8cz0j9VoppKKOJwIjrfidYOf1Wtx/xXpjMvF0jS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.11977cac.0_1618534676798_0.4095738579753807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.018ff45e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/top-app-bar":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.cad489689.0","@material/elevation":"=12.0.0-canary.cad489689.0","@material/theme":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-L3uedvKIkT59uIOJJF3eAAtG5eMNJs9iQ8rqdi5aEbM+fdEfQGFhwtBXv6gdQb+TgTiywf/MrdYfNmxwJaMTmg==","shasum":"5718a206c664872247af89e89b6ee2506e6a9fb5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.018ff45e.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3MCRA9TVsSAnZWagAAxXQQAJFK50A95ej1Ly7Hk3St\neqCt83ofqbPDZ9uTG7NHzxhW2yZkzEX7kSrtF6D95hybiscy3sya0g+su55+\nAasv6sbCUoM26/FG4T+95X9E7f+wMZpt2lBxXmY7grgPi81Zb5I8kqGKlUFk\neafoR9Cc/elJTm0CXpavlsQKZuTVnzVwSiXAtNG8xmRE8v2rgBLRdejgg/eu\nhDaXaxQeEeVpfGXsLNxalPxAffe/d4931HHCpwB2z2r5TlaQhePX1vTQwZUv\n4o6g7jSxKFZlmEVtiggQFWfyvZATrsrWbRb2HY+ju2AGAD4MjFm7JlXr5VVu\nYrI3eog5E3FmlWH1i7QY3uqmEcd+7J2JYeRAUyp0sWGTcsmfAI9JRx4q5Y6t\nuUXmlBDVTyyyBkIN7GrGRkL0O8UciTgimX+/sLa1jfkh4+1RPh1XBS/iGYah\nzrc5MQcwqVLk4brRTiwsQ++uJYG2NtOl3pImfy3fKkuBlg/8mLQgPaExMtNI\n7XVJd2an3+UOZP3WWAcU2fxsEz+c2eYxuSguUo+1Xo9mgUi4zS2IbhDBF4Ih\nkkQ6NML4UewYeXEGflBiTBJffGC/O2acrnJypjtTHZ538uaCzYoHU980L12M\nz5230biTozF8WcexwmIY4Okefh2I0ANwZxkeDXJ1Q4/VwNkqgNvQzLouNe6o\nDkQz\r\n=6RsA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmkX7v+W8VpqaGjZpbrsHAFIemDjlbwJw1lWCSD9cG5wIgb+nJ503rRqZ74sq2G67J8Tt1+Y5T8lXrpfhyKNSOHrY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.018ff45e.0_1619131852298_0.5713379286190297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D3UjWcKXyfvlQpEf+zG1ETlVbTnaQHbP9+TeGYdDazJc2yhznvh4qAleOKtvni8Fj73salGmKgWcgMcbfGbZuQ==","shasum":"be7fd3168782a3d565edca2018cd70bd2493681d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.c99d1fa5.0.tgz","fileCount":16,"unpackedSize":66315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxiVCRA9TVsSAnZWagAAfhkP/21Dx/AO29MS7EnTK1J1\npOqaJVM2qMXVxkVLd5Q1dWzIHD1zjgTj02+v2MrtiUv2rkYpm6jpjbBcWQY4\nR4QDSdVpUwUbUEvWCIYA4dmjCMnGdNUYI7QlwO59W8o+4s+ilANEeP8VtvK2\nynKkSGkDgwjEpFfnHZ1mHtA2WCrCOYmLv/0Vzm5VxD+g8QsMmLaHYc8KU1Y3\nChbYJkzt85TL98xlJ8fsO7IFJorzuDb2hSPEsjdqKqZBeL2o46Bbd6tdVehN\nM3KjLcR3mznc1NAtPsbCQEORCb+9eh8EPdC/WjB9ZBAeWsfCqlz+DU/Tjce/\niWTJubPtfDXyMe9hV0GLC+i6TdjKyF5QUHC3Lfha1fIGJcEHMUjwomq5Pqwk\nDi06g7RV0vknOq2XWsIEs23yGdKy8kJ5+/8BV1cqaWW4SJxyajsxpWi8Jjoa\nJRIEitd7FKKFN/wYkPMJAZy/bZ+CENqST/4IH+4uqW0ALPli09RFI86glKPb\nrDpmMPuQYfmR7BWWaTL4yOHMsN5Om1pHT54e2F6TvvfKNZjDnBT9Vqwqb4N5\nT/IWShdFhmYHqbxfscYj2bVBVbwmeE21pjcnmX2T8rWIa0EwIzMA9BsmuTlJ\ntrEpfazvfX1JV0sN1nyw2kLas2IxUQ+n1ITzfMMzCl5R21ZPclXRxr3Fkber\ncthD\r\n=ZNyH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4AxN9aXTph3y5tSTtdT5VPha4f8tYcxKgqsndHY8YoAIgFahOKB91iJbjGngHAkm3Wt2poFajjsRf4lu3yhrC0r0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.c99d1fa5.0_1619466389010_0.4400449570548679"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.eea9b304.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CES63kmyNmPWqdtoYsHxV/rdIvx52ztEnCBZ4H7heVBvtMNcKhMw/vYbkKpm0+i2oEqkC8KNf2FrfjWtnM/sig==","shasum":"558484249d67a767c84287600b737ffc2401578c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.eea9b304.0.tgz","fileCount":16,"unpackedSize":66370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXNCRA9TVsSAnZWagAAFN4P/1jDE+Z/1xV3sie8pfSa\nQkQqG3QiQHtM2TuDKU4SWFJeiNY7T5wKxsycB4POqDQhnW/eXEfy0iU9WEY1\nqsX91JSADw5+78ocogtpKClvUF5+C5hdpVN85T4nI6LBxFbh1UraXA4xXu6e\ndY9zTyBGuk4J61M7J8kNKuAjkQa4FPHsEgj4VzsXgXLmjmMK+FOMMXwzR7+9\njF4BYK1gCTLV/vD65KHv2vSFX7rwTdViZn+JnapNho0Ri62pMND4lQdsGuDg\nUphC8YisKk8SNenDDVFUO3/4CDdHnECYMS+43ouEMi4+S20mR/pcxySAhjpd\n7nBS6ybjcdFuKoiZW93kuELBbT+FbwZc5Mz/PeynCaRoRRMEDOTTtZEzR3cG\naEe1ltwb83rDu1KaoPJ4tSvtJhZWMJ5ZPTHCXxTLutOLr3LdaKhXPZNlWWxV\niWGzs24ks2COgUXK4L0HSPTJndlw6TLE027MUqt5YFgC+7lEMpyVaXb94QXN\npjyATWypiDh+1RCpXcmYZhtek5UJM5iYdgMNfKMCXPVVk0ckkF9S5b1A7ujg\nQvoisdEm1+XfYjfEu+RDGXBFFSakD2Rw5nXERAse1geR9RtX0BV4s11zzdHn\ncrlLpqkM+i5n5LVtM5PmizYwcO5PmhkPUUQRZ/vVfCvpAjrIxpUg+rc0D6FN\nQCrV\r\n=me/k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWA7BuS0rUlXLed8CqicjQRyrvZncaOvJFT8vT0RQX2AiEAix/h1usWm7eJx84GJX7D11+63B5L8pblMGHoi7JYLqs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.eea9b304.0_1619563981392_0.09799713269837929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bpqjz3QheIUndpwW6cgEBdRJ7F7i2WglhpThETau2c7m/Q7LyP46FDuqWgHLb4viXRLyRx8bKWU45ibgYhqTMw==","shasum":"addd72fc15847d2fa472b05270809494f2767384","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.5dd85d0c.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKeyCRA9TVsSAnZWagAAv6AP/0iMUHNxKuAJ76mZBkwO\nz0IkMASQAySY/lkxwB2Tk301B3SkX3pIsITU93dPeLyVAxHUueWd9JUI1MXJ\n8xM3GjEiTZ04aYXWDceRbnnWthKDLq1iM4U+AInafWEXAYv43zBmBW3my4Wv\nlEMQntOPriKB30QHtP1LET5Au0SmLC0MhAM0Z7HoUtQqH0Uq2KMdaMdHObs8\nzcH0eV339zUnXybdSpOAp1IIuTYKewN0SBTP0n3kQUU3nUk/6eftyRpZ7YMv\nbG6zcjss4SX8KmYwJcBdsa0udFJzE+XtCxWiEaMsITcvgCHiZKoWauIt6a4v\nKFozAIDomiiw6AK7WKLklLYk+3XqsuwoLH3bsRLiIXiEyalXsO8BJezfU25H\n/cPpKZ0Al6sH8On6nnUq2bi5ZxEgnRLryZYl8uykPG4H+xsQ9IcH1ZMN/xvo\nI/yIZyhZZeIE1xaF001hvyMRl+8jCpgUnmMwD1i05EtmUVHobqynpO5HXHY+\nuRbt12xhXwvKkpnRqoWfW0EGI9FufHyL1OI7Xl2NjGBT3RVXD3mb4qvZjkZk\nltX2pWujvbQuVjfcmmj4lsMqIaKmqnKRBCi7TWUe0aQSJvzPVrWXv2L1Exco\n+nuOWoxmwMTlZkys1AOAgyZLRY994JVYfhwb9zcU/JWY/kFoE0DFkjV6b28s\nHOEl\r\n=5UVP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgEaAe7Li/rLfqhbNoNe8RWlq6xNHOYs9dLatqKXGNBAIgaiEEJAdopkj0ieagGhDqAgJoJzDzHSftdWT0Ni5eNaQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.5dd85d0c.0_1619568562485_0.11520009940829956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.cc813cff.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e6FmEF2aKqfs2Ux+UNJ0KVHqMtGAiFpfs/zZBmDv80X+GbhLZpPaxC6r8dA2Uekw+Q6nvUjMjqg9jhUN7LKrmg==","shasum":"f1119c1067d2a566d05603e3b73c54269288b348","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.cc813cff.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRPCRA9TVsSAnZWagAAyRMQAIPJEEt7h22EZoAhxvCd\neE9aRM0d8Kn0yrVKZSVsNdc0JhEXLWqdRmmpssRwWfI7zn6f0OaEGtm0k3BB\nB5VYc9EsU9yD4OL0wTnvD2WKj1GOJX4ml2bX09nMTGuRcviRwshOd8HQKH89\nrc2LYzmpmEZ8kTiROxOYvQqK1Vdubi2+g3v4iqSU/y8XkqR0ghdCTrh/0pwM\nQ9GmLov+sH5JA4UpWfRicYAC1ZuadbXSG9xntLZ065H/19DgkAub4rhyH8KC\nlmO3TUKRIAReldswFtcczJJ08BlCbixnzAJXo46cbYvso3Pe128jCcISovWL\nzc0368kMawcVcM8hg4bqT2yODtoZJAZZFAGyOd1QFNam3VQS1ivXSxykArJ1\nRbMz7GPeurslgjWY2YR96PFkTqjZZwBhyUASje/HMs86uBCFdvDy4I7WsF8b\nKyVKwqOFDjy2+ooGcjxla/bYaS7WcpK0Zl1DMHvWN1ncMwnwsCwOgK7Rb8WT\nCviGmvx+zZOdRWOSGmaAadB1vcPxSQw23xL5Oy/5HpLPGA4KvOYtZSkeFkWE\n0q4x6AZmbb8mC25TeQziy+LNvjuGpRcvp2hsFOyAl4RNkUnD+bPmSR5LpW4x\nUXvejV6gO+CqYE/Fn9mNxdFbLHnHDI2XSbOPvYbqRtKyq/enUAGhhrxvIeF0\nPAOF\r\n=vOZ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5FWBbQBT3T8A7q7GabrqUCMLt4cJq2TsLvbsZKX9E+AIgZNlNhh+0Yefuv76pDw0PJwduIFPSUIiwLwCf5BHdFe0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.cc813cff.0_1619817551001_0.24031545319283132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0-canary.0875e898.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0875e898.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uIQJUy+DbXNjZRlxRujdGdnZitYIcl59W3OEnFAXEGD3GSpkRV9lee5acAuZAbm+J6q2INxqsWo8SRSUnTCnZA==","shasum":"d55ee06385b0c58aa3bf23dbed061174fbfd56cd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0-canary.0875e898.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHY5CRA9TVsSAnZWagAAwykP/Aj/2BDbB6qOH++Isn1b\nYthlPCdS9PT0bdqCilULtqxgSmdR/8VPaz0EA58sz+GRo0fa8wgtaNNKD9m/\nqyTUeQZx60x7fUElbNMVQnb7xP9WBZ5NJ5DLOr7UcEgBjFMxO2dYQI0Nwkkv\ngUhvXJC2xUxc2yVL+DabZ5K8edJw+ifyqWkmeIVwIb0Hs+Byy1I7rBH4lYxR\n9li0Sz0qWx9VzQAHpHLfTbLgp94lOgTOjzd7O2id0HU/0u9bG4CM5WccEPJD\nzlcEdO9VmntmplDto24ndf21Ka4Nksqy51WhjGmKyNBwJTpdJ5wTknBHE2jX\nCb/9dCt8BPm4FQR3eGxgHRax6Yn99tDiKOH5MifmRE67YGtjqGjh0f8Frhke\nj1Wvwhy6J4NV164wyrKqq/9/e9Vj51iWxeaY9emzrLgmTZiACUPP3vOKXwmE\nGtSbpS8MVv/bmTnIcAr8xKMPYWMqWdDc9OwLLxIEBU7fcdgas3XVc0GSvCvC\nOY+HP27vcx5SUpz4SjUq204yX+RA12v2AE5Ut+aq3/rweDjB6L3mzRvJ5cVd\nsGs2aYtu3016bWqPOXDmuKTnslKNrCGHjagcGry5sAB4HNlwbsAz2tYgGIdF\ncL0+M47JHttmOsFqPOdKlgJBbu0Ft0XuvnQCebfH7l0GJmlFcvs4RA1lQIEJ\nzaFm\r\n=n2gE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1TB8jVOV+9JeMayJwFavrYiuvZaRXD582v584vVqJ3AiAiP8cJM9DVhtLgNik3AvgA3Yrql0iUxfnS8jGqIRETaA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.21.0-canary.0875e898.0_1619818041159_0.6985074837204965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-top-app-bar","version":"0.21.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.21.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-EM4C+iDWnHEjvA1cgFWukZ6xZwxIVEYjTQ/zs0DE8/cHmPxu1xQOXJdAZbGAnh0acSiUY3tcYrxsc+izL58BOQ==","shasum":"75689d5a1e38ace928a479ca712b97adc8465f43","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.21.0.tgz","fileCount":16,"unpackedSize":66357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmLCRA9TVsSAnZWagAA4WYP/2XcYLGzqvSIAINsisll\nVGeZmcPHl7SexpDXbqO5dWFbMa5vKdP1AcytYN4Ikbar0fbHu0FUe2J7UGZo\nPXh8XlFOnxnsjFGZggiC4zvsrUixUH6XKAsh4Pq0PQbCQZroybJ+RRXTpwvJ\nGekWJyZuJgMTHTmf1CAqEjHLG+8JhBI3J6Ca05uu0nU/p2TQg9gcNrPQwxWR\nuOr34md8GKxHiCBG3ZIxZ/CHOfS+IcrVdj0lWfMECDBDtDGJHiLioqrL8y2u\n4J+kdH0EKLPFAWITSANBGGUvjecKqAOUzv/vWjSstjdawid6vSrqqqCCjLxf\nOfpYAGl8/Th9NiCzNp/VDAteZHCVeE9MW5TfjXsTL+sxjvjos9SFgBiDBhvV\nnFGnjQ9yIYzlGSabvp1y/oxeveTbFehXDEfpjoUna6G6GReeCg1dUOs8/y0Y\nAS7id9U0Ll4hqzc1dSz9SFKFfmP0zmR60EbszjBL5oCVx43WlOwEbRs7K7tl\niHEDfE/mTgjncILIZmhr4Tc6tqBFR9jlBQZ14GKvQZcqfH61d4DZibhFjkJ/\nnTxtg36nT7DT3Botzq/9NZ/iuNtj7EtMXsobZgeo3alzNFh5uB5g5N1XPraZ\ndDrmCRCVX/quntb4dqlpiFoRztvgAceftNAw25T0/T/KRP18u1alNXXcI8bu\nPaFu\r\n=4w9A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHbwKob8C0jWSN9IyCWiDNm/hQwRGME4+5tdMN3eCfEGAiBLsNUg9aFkujM5wiIZDHOhncp9BanJufvQM1t6WpRL+g=="}]},"_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-top-app-bar_0.21.0_1619827082604_0.6607918326913342"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7h94VlTksAgG+qdEF309HeBUza6iP2tJanc4PHNpFDOnCIzL27YAFHRWV8pITATT2eaJ6dXnQ+lqigExvXYQUA==","shasum":"86c584368095ca62db00c9f0e680549945270b0f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJs1CRA9TVsSAnZWagAANW8P/A0G53UZEQAX4QXFV+kq\nsYzzPKTL8xdI5SqBizTyYMXw3tnXnt8KVMDrajbgRJlcibhwzFik2ZQt8gW7\njoL2p2tSydCdXtPmUYuXRkw3c9BTq57t3f9cw1d7gJc233Fektg2RL+MOfpv\n7Evv5wM6WnD7A7Fx6bbt4UkdvFZB5RVAptdrJO3tBF2emleCFxdEcNufLw8i\n1stXBTDmlOXK2029LgfRKDvXWsSU557Q4uju8ot0KYThlBVAJitIzxdBpr2y\nfmcP4r65bIJ3cjhzg1rtYskm4d7DgZq6EPNI4z4mric/Bx065OhTGbbq/N7/\nh8+/Q4yw7/+hj5QQEqtyF/yRofwb2IUwzEMmKg9e7ShF4H05BstiTowKvkma\n2KX3Cwf5iUEzjdEePca97Ctb48EkuW011F7WUPVE9H22i5/JWBOX6Q+90EzG\nCuEiIUiTqu5wHCSClSx46dK+TgvbJTvyx2kvZ75noFQmvo+KhlNwAXM28zOQ\nKdcmqh3EbG5cvLasBUW+QZArkpod9zf2BhBXQPpb95pDnD7b/H2ZeTapYY9R\nKKj/pEx/jhulLfZZLveWvYaAv1gEP4Ppuy8wnL8p9iFHxPQXTNhAn64cLbz/\noScz2ykaRHNR89HubDqfu+UIAx/QTUtN2nJYrXneOinIQC4DbOAxDs5QHoFv\nj8C/\r\n=EU0T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRzBzKFQyr/1CHaSIAFBYdHrEf6DThmKsmSD0WADyB5QIgFRUlLWUcZUw7P3IeVr25XN+xwb7yAv2QhNEsL2COPrI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.8f1e7e1b.0_1619827509083_0.6404501241259823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.deb0e792.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hVKdZuJ413yyOJWv1HZWz5tDlJlyrrGF5eMP/CSa19tqmDHCpylTCJs8k1d+3MNTmRlXwIRphGoH8+MkJdXefg==","shasum":"fc9f73396fa10d9c235b10f6094e300b7ccf8faa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.deb0e792.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxNCRA9TVsSAnZWagAAm38P+QF0IuLIFS+TQpPW1qE8\nxmiEcXK2xm1odHPkQjTV63NWAmOVE/iUbgLUbt1YDdBKfrkD9s/8byBZLxuE\nlXVQUhkGmpuRKKF2wf8woILGlzOB+LYqBeeCrpaTPclrCMOVj0ThOAKnwABc\n9tN8OwSkG8L+F5zM/PWZjR2k11IoIjw784XAooD9chv72jE+NHQcUUKOWvRZ\ncFof4XzNPyYN2kJcDMCQKHx7b9qSyypQeyQo2Kwq8hwZ2+MrqQefUGgftjGc\nc5b5tMQLH8Mfqc0sHfASgAy5Kj5j/FDdoCm+dHHkZkzdAgYmH5Rnyh9A3n8J\nTvyNSpSGU4X22x5iKlEUFwPqxSvtGShQoHx/uyK5z73FJLYk3Rcnh6TgdV2X\n658XrCPrj8FUN4PIHH+imHRrP+kJvihCVU46qPZfelFoGRjAsISDH7XaB5Ux\nupQ72LKArtoT5geldQfq6LY55XN35nM8zKhNDibpBpqzHWD6ImVrq28QPJLa\nYD7KbNjcW5pnlYnWnuPfVPaKPUrfglzKN9g4mCuH5ZAxioxrv6jIYvncm6HI\neaueXRivZQkCziFJ087lpWoRd9vKi3gfAtDIF56lpv71eSNoUENWyQmPIQlG\nFcE2Ovn+/D8sT2Z9bNmR4XRxOU2+f2L8egXmW7Yn6PlOK8TU+peLnCf/xS86\nf8ua\r\n=02/h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNppHQoBOXcYfyxX0m0zE7FC0Ba0Qzwu8C1ZAMWJ+52AiEAjpuxOhaDpSahM8LFE1X01Z4Uvjzv4m+tPZDn6+M5FsA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.deb0e792.0_1620077645003_0.16530479306728885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.a3ff615f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/top-app-bar":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474836ad0.0","@material/elevation":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BT0YAAAHkUFXDoszEIQz61Y4YqGviVm8vTbifmGZHTvjpVCW5iDI0NDSipVyaDTiao3A8GUztT/1/v3duQ2rPQ==","shasum":"07c62266b01851d916242680e9a6b4e4ad162c3a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.a3ff615f.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHo5CRA9TVsSAnZWagAAw+MP/1RUDQab8tHXbRXpOI4S\nqzMeJjmGn8d72fhlioIGN3xJAY32bvVWg4bbeWUQIJfhvyO1Okk2WhEPLE0R\nJ9HPjp42e6oPj7iN0Qs/n5ouSAz72R7TfG7FSVSsCDDyYHFL5Lsqo3hFDHdr\nP+1yqYBbThpYVMHIkdP+6gg9wRwGBBlb96ujtUBlJhj8aahV9c0F/Dbv4isU\nISX6s4kRl+qBUPvpn5hkzNAdas+iXFqw8vvMhZGQSMPyoqJe+mJm/l62TR+X\nO7RRUlR5IPmi/DdoVM2PLYXk8/5Fsve0xontI/KJt1lknJhD/OtGSe4MCINg\nkQw4fhlIuiZVATFgNPSjzcjTYdmF9M5MJSKrKLQzmFRqELvO3XJRnjN2eT+V\nows8HXLo5S5H3Nuq/yU+N6HIciqkey/u3riCt+2oVlHca4c02F8H5yBuaN+0\nQjdMg0wR4wczNmuc9GDM1xazHROvGqHnjGQt8kHb0K5F109OEqmRwdpAPM4l\nc8yCx/72jrWqn/FsvHZ/rnz45hX+rhi2dIFfua9X9ektRSz13F+Bi+nLm+E0\nKyULdtQvG8B1OYG13n47pEEBNBr2LtAxmAdUzjCHXJFkaySCwlzh4On8emMJ\nTDs/MN0gtA0ajg0fZlZQ/hIEuUbF1LbX/QbvfWE7801mxKWiBptQUXbTSooq\n5y3/\r\n=fa6m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrFAaGxFpnbAyCvtOTa+FQmNGE85N792x2H/+SPK88zAiAIWKTtXGFUAHc8I71BE1Y9UEOWq+91Ja9RAuz7xIPWrQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.a3ff615f.0_1620081209042_0.736101906656325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.948ccfb5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/top-app-bar":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474836ad0.0","@material/elevation":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FR9g+GFITPHN4jywUiqAuqCRIaFtTzVg3avjn59PPKSsvVwrZeATcj0vZ6fwjQ6BqqGuXixQuRwuNvDPliCd7w==","shasum":"986898db4cacc559327f1ffa3c581c999843bc2e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.948ccfb5.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJD4CRA9TVsSAnZWagAAstEP/2gsGO1eZJt4baDzCO4X\ngkNLSSRWHbKLfXMV18J/pk/r6PRVTHl348IU2IAseV987JPDu62qsyzXJTOo\nG/RiIxGM2sDcD1ncGnr/qZigATwby5YrWEyIUDjMs0k+p2xlAXl2p5DmStDV\nADKODhZP0xwAykoreSAU1Pfs6AZkvZ5Ej5Fx7VD/PzICFUZjRAFCnShmsQG7\nsZnVYkGrt63lVYVToDsESdHctodg5s+GLlP196QfG9VLvbhXenhxm0tCiEvq\naO/NJS+ncWCsPR8HkN//naonHx7q7hbk0RvKx8Qcf1zNek/qBR5bLEDDkpp1\nj8hglms4t7Z5ai3LUqoUinQDaX+YIZ4jXYnik23bataexoGiGjSl0WNxgBko\nZSZEFWdDr1ThmUQ3Jqm03Rj4IkVeCcT7Sh1tr+kKRALVYsCFBhxdhQ5RZ31n\n+TZJcKdjYlan6ME1jkGiiB/a2+Kqg+p5xjVVhlQb/Jh6yDdbgdq7QMdJlRfJ\nceJPzcJghqECva5x5dxTzj5o8GDGRuQh/nK079sDJXHVk7eVDjKKvUyGlLTs\n3vZiqot+g+dBLkk6ry25CW+xFpMFWeuriw9deOJdnCrJIvs4pNu/GhCd4Q3X\nOX0cAmnWqamfMkD/nwBFMZPf8OsdoaJ3tJcEoqAIC/jippgBZvw4T8xkoy5f\nUvXj\r\n=4Lu/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1EnZ5wAE/n+XMvOoK8zC8OoftPiRVsoHMwwmJXLAapgIgAZkIYnEspiJ8xTGL64Y8PI9Jyr4VngD98yboRiVHwnE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.948ccfb5.0_1620087031905_0.3286563003975369"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.9f8337d7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/top-app-bar":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.be999eb08.0","@material/elevation":"=12.0.0-canary.be999eb08.0","@material/theme":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mvUGsj8GnxAhQ62JLxIkrjC/65ChPKf56VV1p7JLshKxU8TbXF9Lo0Yi1kLVx4Tq42+tT7gDxla09VtsekgOWQ==","shasum":"b9fb1bec1d1559ec018a0d54cdaf791e8703746e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.9f8337d7.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRCCRA9TVsSAnZWagAAaFoP+QH0hvV9lqrcYHsUJUMQ\nBa/u2c25vOCxrhEIKDlkjPN9m6FiQa1lHwZDSyjCWh0fqgDDYxESblnS6uOA\n19IHEPgle5MEp2vGAt0GabUEKIAcutrlnSNCm96pEYncrp0LIwExQTClhTUk\n+BilQjAkU7dec5FpPnSfrUbY5LEK4XQkHIh1/n3EgmlBQtiaGd+o4eZrz112\nz8OT53p92iV2FhWzH4mfvwD+CcCrC6XpLOWuaZUtcfArUC+t15YvAUiSvSC9\nySFTWT2YFdtCjCTWmq4UfAnBTDb4pW/191IDyX5bAuyMH0gTqayZcnw4nPci\nRxX5sbIP6NwZfWvHIE9rP9VBa4S87uQnWSdxp2a9XZSa8Wxte1cqZI63vKJC\n1CPFeZ/Bz8eBBV2kKQjK1544YmRdPlYxCPt3U1j3cMUMTqFnKc4TsArVMieX\njoFzMaOCZFyaUAIyA4LyQWmfShNlFCOHwyomyaexKiIBv0OyXhSuczNK4EdD\nIJ6UMYWY4R4Xy4RPHnhdXd7hNC9sYpIBRF87+W8uG1XpiZ+4sH4B8byOhjMs\n06TVWblMwRk2t4E6mPkwe/46aTtSkIUTWWRccbJ3NGuXCiTDVOKrjwzYHseD\n7Q0Po+SE88PoPhNmyP83emWmdq19Hf9eWFR7NcLos9BwMdGX2FbyeL2et7mr\n2gZp\r\n=7U9g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0xDiU+LXKszMcJ9KVDPUGM5ufZ/14RVJnawReeJiVxAiEAovP0yVJgDbhh8xGOR8PuLXLK7mME7c1fRykBGM57Qf8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.9f8337d7.0_1620153410305_0.057907268457040306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.5813480a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.5813480a.0","@material/top-app-bar":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.055d4f10a.0","@material/elevation":"=12.0.0-canary.055d4f10a.0","@material/theme":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D3XaCF6yELION5FuLkb0xVuIPa7tGQaUB7AjfeZxKe810+poZOrpJW6TMiVXzdiQv8he6oJqPvnogkrvgYiefA==","shasum":"335185515b2074974d7795800c3a8f5a3dfe1dc1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.5813480a.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMJCRA9TVsSAnZWagAAelgP/RfWu9dzCqHEoRH5FMHT\nxS4IM6QQ7CuZPI6Dzsh5s2ts2lmB067r6bJi9TTMz4Hw7Y22XWtdrn/cT7/q\ncTVm7XPy9Zr3JwNHnQe1c2mkEfvgyYNXoBeRjy1phptHPG5AppGnvSpKIXz5\nrsUvagr4HhHK0BYydwwVptnPxOJUvffLNqKZt2cYP7XDVQeW20zQerGw47UW\nGJqmvQRAmMHtll20Zb4480Ts+ZrZvCb3JE6cFruPGfid5iqI65oYS/hAIeca\nCErcvDxjzviJmSIPtj7byhXmeZ82mRPrm9sfke4CSygeBlFjoxM3ta9Fbhhc\ncX1+ALgb9hwfSOKSoqIJ28De/DAO6PWR3ZhpEFzTPaVyz/0KqmTMJ0qDDyR3\n4eCBEBw/9JofKE0f/oXxqjYjN2xBmzwPiw3Tn1EtGFCbyRmWhm4nCOekrv+Z\nKyf70H51/uvFfqb7qEGXNpBwNYIeDa7DLlOixRzIIhE+dkqPyJQONAffMX10\nlVJi3oAFTrzhN0xeox+Vz6L9jbayp0ZaBHxLy23lSo+0X6KImHmX9ZxYOPE4\nuAMwVZDVIel4TR06DpfOb4m9fFgm6c34JP+6ODduWsnYSghCcnUM/dbALRI/\nS46K+1hQaHIB31T0GA7o6nIoqrRj6TblwBlOnvZXeQ0ejB+By8uoBg3TK2qh\n9Tw/\r\n=3Tjg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9ytHzHI92JoaQbZ0v3UZIMRHOMwQA4o45qU0x/yLV7AiA55ztcVKjLKyzxsBDDqo2ET3H7hPiIVzOOm/6rRMyq4w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.5813480a.0_1620239113431_0.010192496233301096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/top-app-bar":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.03f525f9f.0","@material/elevation":"=12.0.0-canary.03f525f9f.0","@material/theme":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uQNhaux2hPTwuVF2eIssmnmQBQgZWVPRidPOn6PDaZ9yTIFrqfm/b8dSGIvqNqDD0s+k86jsmQwuVGeC5JA95g==","shasum":"03491cb48218a7fceee82f7a8fc12d9048b04b78","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":16,"unpackedSize":66392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC5mCRA9TVsSAnZWagAATj4P/2Nr6nJDVfc5fnjZyJty\n0DmeBR7XDvfKih+Fpt8R9FqCGN9L4veIwqZwHOYB5yulgQB7r5Ruq43jWhUt\ncmiWLmwN6a7GFfQdIHz1GuEp5TXpwl/lGpNeyNq/vD8ydWWbl0XKM5UyCeMj\nAKgkDgMZ8QEtFL2hNDwkIT/8Qae9cK1c4J/1w7pq4Q0zayM2epX1+zX+ocRu\nG9Omeh/iVfDURuNdgmFzd03X5sVw1BDMe8ydmYlGetIIWEUjHzcWpAkjWTUQ\ngNyq2E/u58XRhNEexEXAv0CzXV6Hyt3I7XmqaevuK/SDv7Ei8yYpmz7XXpZG\nlcbe0iqXai6D1vC1O3P8mrgw008HX2v85VehO4jywtsNvF+22w+Ijw1FgQo/\nCQBoYpXyW0gpYZxurThcGbGnhUMhIahjAIOFqg2o0VB1PMJhsaCnmIA1grTH\n5qI+kOZh0ucyoqK75tBtMgH01PLHVjUjOgtSWb4fyvsQ8sGVhfRxwD3YWo9N\nf3LkEUoKEleyiMNtAvo00g0GSPW25qcJ31v7D4xlDWoT80iYeqVgRab1qwi5\niL8HBAXcofuv0nqC+OES44uZbfTcZMz+PJgqWuS37+CxbRlkhOFLfCztqM+D\nMCLoNeSbJuUSFmtLgHf/BcnDAei6sMsCfB3Twj+X7Ex/j/XMmg32SrLMQ75r\ncYpr\r\n=G2l9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBoHKAdQiu4SWZ2yxCQSgZzq3PCUA6h5C+LZaFJbeAHRAiBQ2CUTzkcdbRRZPfiguYFXFS4OnxlQAiwjq5mflqb/LQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.ab7fc1bf.0_1620323941857_0.025314882670729455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.25693d60.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.25693d60.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5EKfbuZ3s2Kl0aEmvZDucHN8KjE8C8u+FawFqt94/ejun2bQK4KfzWqksMufL8o938OI4GBNz4L0DkX6nFJXpw==","shasum":"3a2b613f1940d318ab3c7f1250340ba1a444ed19","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.25693d60.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdmCRA9TVsSAnZWagAARrIQAJX3wn3QW6SDHcMfXTED\nOL722JaVibZFZcBU+xU0QOmM8YXf6MIijft3Cf7assamJUltmwshQ5+NGRjf\nWUNvXKzyqqEzGFytU85IVAW7Ve7uv6/9Cvm7KxFAe9amwBK1AmDSn2sx8lnk\nzhLosSAiZwSjFaPsceJr57HV8pAeHoggErWgkkxOQ2O6Uk5VfkRiDD3HGBXo\nn4+NHXNXLVQ7Td+1LZXcdMKa+QobERS+DMaCmcmESEzb60wwMim+Dg1+8eNt\nnYHJVRvCfpRAgPoPUyzSiH/7slGn4UO5jhAzcLrxHUHYJQV5iaIRlbo2rcIM\n/UaUGt/f+c+bwzgMLH3k8boqFusO0pUU+ps2RxmEzrlH2SV7Ene+57CKZFbI\n9EOp/L5hUOv1dccMPFFYwSOhh/cv0XminwKndau4QEvGDoiSO/om7Evo6Jbw\nTCH/lQpYkPmeJTuYDoYs1feiNK7mndh91XFa5J3FzOJIz0MUv6UU9OVMnH60\nS/4tFurlJHsVEfKAVdNwkADBxv8gWQKVLAlhVBKAGPZcYJED/iYcfW+oHj8u\nXF1IEV136h44f0/tkYd8IGgX/ev+jFrWj+j3DDY/+3b3cWs282a9oJqa5ah4\nYNXwEByJ5W3Ze4s5MsIsY9g+FgJ/J3+fFyv/LD2KUQUDlHnsEQBadF2VVGuz\nVwUR\r\n=w4E7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDRI++ezGNPmVrB3lMQryoeeaimYihmFQZtsAAB4kBmIAiEAg+Hw/EpTysZFrPQGdYESlxVbztHSwpQAMonZnmpIIJ4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.25693d60.0_1620424550090_0.24765575634275372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.c497962b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c497962b.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E60GXcBOGc7BkW/tI0yif5xzMvmJoEKUpN7oZDXx69NXUDvCBUaZxaDX0GizoeH7qDChoWZNnfJUD+KM0/+DEw==","shasum":"201f57e3bc33d63425d7a0db5128d4a060036a3f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.c497962b.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbz/CRA9TVsSAnZWagAAaFoQAJ7nGayv01QDpl0a+g98\nRWd5DP8WGI6OWKjewpAraiLp4XnBN1FXfwj3J1JQZa2WzkpaQqNjqFgonLbZ\ne5at5xie3Y3P6aIJbeqL35ndswZB3y4KmJtd3n4hrq8/SspUNeO+Xhj/3FXY\n+iEcPto8yEf6ASS7kATkkTuA3mBBfBgCd4xfr6/jdl9MdyYOGJF3Va+f4Kwc\nWzYItNFsZh7kFZcYfojhDaO2jRRl/KIVvgDRXFK4D5pwf97JtginCWbo194L\npoR8bcbstf0MOk2p3Pep05eHx06cVMntMi50mibFTMUKmgqaPPjwcpvNlPwh\nYu7yvwiZWngW+6m4aGzbVTJRe3XpkTXpMS79OXS66/lxI4STO8FMhZ1kJnze\nuEC5A8QVhXjVR9UKVEU4pXlFK68S5/1J5AJrVwbg3pDy9JTSEGqIO0F5LeMA\n6S6VmYee2P6SnPtJ2VuGnMD3VZBcsbjZelFGRx9LaBg8T+LtW0nTScOZt79u\no2H8jdLuzhcDdKXAbEqksXqzusuzMeQEhmUfYrkLr0lCXoq5mx74plHtQgSY\nzI/+yo98G+0jv+gpL2dcZwcBF7RKtJ32RRE0QUn7/rFCkJ52+d9H4P8CYx5A\nn7BiDvgtAa8H1i8eXlC8tKuLaOtwX+a8yAi/yB1taxxl/VIXh9nx8r63V0G/\nFpqE\r\n=zw/B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJv2daGPGorGjL8yuT9mgspwXdmTxEGqe0J2pI9A25ugIhAMakiICjWrnjhe3D/OMCmq6JPxApGQ0J4XqzNm+xiMI5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.c497962b.0_1620425983456_0.1736979066022306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.e300688e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e300688e.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bQC4DJe9dD/q1QdtF0gRgsi1g4fa842cd6o+50WJaVLv4PNyMWnII0lnYlzKvf9tGhvHYoukodGkd9uC4W6n0A==","shasum":"f3763d5fcb42638049ac3b94bf634a3fd446c1bc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.e300688e.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4LCRA9TVsSAnZWagAApRsP/A2jmWZO6HxAPgxyWOaI\ngvgqdgKrG8/pxG80HkfL2XYEnBVpKkzwgDu1Zl5/fCbK8As3f5kw0hBWrflm\nA5XRkFTNOCsPChcwe34FpasGsRUq1zlpU/2tceY7rzrfR0a1T4kYcq2ZGmsx\nxwJ/5kfCDf9zBHKFqkBxzCuhmtIrMSg4cYKY1Zkzwaqi9uLgLGZNiWX6YOaX\nuAWBLKFWcAN+D28m8ALmLvm5jABoQiLy0B34paXOHjKouo+R7RkA7hgLbPLh\nHIfIm+pnkY8mYusHwSNZ/O5hNP/vvYgmS4ZNCOokc6BKcTl9K20+CkmH58/F\nxYuY42JejHa/WOkD0DLfzTk9mN2UethiKBD5HI3zGuvzDJAKEwxBG0sOmKXY\nYG8z6llZQxj7K+YdOrG6xSZbDA4gLXVVPZmSX8yI1uaO2rt7RjYaKElLP7XC\nj9FtBj4XLr2XYccwBW89FAaDp6/fW3lR2c8fnxtdfW694giJ69JDCrfQiMGN\nM6cRNGezfP98nDGvtxiKTmWXFKrpb1QTIX9Ygr7pFURpEi68aIKyk2Ye47sF\nZJXPVjejXxi8tce1ourH1dLju80sEqUFFQlIXB+X4qoz7yhBL9NFALKUkZzJ\nZozY8zP5ZT41a2Sgp30CCnuMpg+GmtOpLJujQLyjWbuezYCH5jisfWt4SPaQ\nuogO\r\n=+DvL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFddZgUzFvLPbR4JRBM+8SWHbqjlW+wZfGYPCCoHUl4BAiBm+lrLukORp2M7ur2VyAX4O8TFijynJKgeCjw3KyvtUA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.e300688e.0_1620426251207_0.8299867457832479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.d70287f2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tgxi9nIXbaH7tpApI/ngC1QfAGVELrAXbVccz5iHayHeMR1Nyzbh4KOviz1JPvoiFJmaP1Syo7Keft2ysslehA==","shasum":"e26001f3944ba4b55c1142980449674ba7cc443d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.d70287f2.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmBCRA9TVsSAnZWagAAUP4P/3KyptJQvkB3StqMVc0d\nXTzAV6w9WCXcfeFbXifIXpIFZq4aU5Aoqj0WlYFZs9JKrkLJekybmqsxyOyZ\nconQ4zL2UGKdIzEj5iNYBhNgeI5nyeufkyf/u+q7fagzgH7TPCwQc/h2ocjO\n9OcBswb8AJfd43B+ZoHbiTAy1ICv+eg2NadycWK3riuyA7DOywg2aFUTAAMb\nNJlZYl8Q0h3R+IuCWNIJI3VJEcA9p4D4Z9B5tGyjez6Tzb0V6VF0ThmuQMa0\nfZ9f0Za0oZB1x1552QtaV7qZXJYoofRCxW0dsARxR06Ss+KxUjZ86H8CaD2A\nwDNPKCbvO0HaxUvAnBcYQ+rKhGachgXuP6jEDGkjnPbz6TPpzoAP/TAX4/PY\ndj+p7rRC4R6u4sSl78tcHnxNcNJ2Bs1eyTGHZa2jSvNopG6tkOzCSWIhCfb2\nRj5pQQj3nPYbwFxxk2hgHIxIqLQp2CJiUtrcbfRQJovxe6Swlv8nL+A+zwco\n2PfJfUF+dvSkn2sVy1F90sUd5s7McFEcPkFgK0hnfVdhc57Q9t6hwXguBVgv\nd3E7xoPr+Apqw3d6cuItUXVkfq//fj9KrJWCUUTkKq4sk7FKcuQZL59Nxznh\n88K6iuYDaRThEZEA9louH03FGnC6wRSyVybOHa+TZq6X2xUn+69VpOLEOhpW\nmg84\r\n=+icH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0eYvZ0pdb4na9xiKy8NVJhBI6guJ7wfQcUZr9kSczRgIgAQmadMmrCiPilphMCZkDsnDBgapmEKgP2DR7hRyYwPk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.d70287f2.0_1620674944500_0.13545415378983616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.02e841b2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Kr+hcDIWFzmS6Xgv3J8c3+g2/gJXhDvFvriEcbQhbIy8IZeHHoMtmOWAgd5f5hX7RM13Z0yXKtf140xBFnQn2g==","shasum":"57cb6a23afe442ef0aed38171082a3a036f4f364","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.02e841b2.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjMCRA9TVsSAnZWagAAcKUP/Ap7ISM7KH6or9cG8cYF\n6oHNbX7dceVYEvRv2sNBMOn209Cm3z3o+JZ6gvVMdXjTVUQ8HpqFQEq2Tc0z\nckctVxaqEDBORQMYshqFPdv9QpwQoOG+kGJbc7T7InJR/v8tG6LvRK+Bfd5I\nphbKAxuoTro0pmilQFq5Ee3AYArjfxQkyqlHkFIIW2d7jwmtF//ltLgSmr+I\nECgtQmVCiapt3ZsC57Yw9rho9mqUZniVB9M4v/6Z7t5ku9rNoS71UHSw4Ia4\nDr0KJq705EIW7q384IHJrWS9o/k83wcXSEfRTmZyZrVDmPGkxSJ5+bipFc2s\niNHfAV44rUQiSP491ibqng/KpGih/ZKPJZ53qFPqZgzqVn++WmRQAN1a3naI\nEGq5FNnRBx5fmxFBhDs8vtNdBDXArF9WS4v9rchnJ0bDrgsJdPjqDVUtijDu\nHEHaHs7uOugqdGvtbscAEegdJQln0XtJxg0C7cmeSsg01wg6SHCVE/SyZHmC\n9tmjC0jUNAdQp/FO7aQlLXWYKzYC++lEHa7fBir7gZglkgtqVQvdVPWnDVz7\nVNUsL49FblBpXS2nVUvF22dqCt4yrOq58tViQJetZ1h+Ln+OAD1mbs+7pdVb\nJ1zANQ4c5FiQ6GYzXTiJlhV6Yi+IuSapXIAhPj5D6mcjbtSJIwIySMDnt2MJ\nXNJz\r\n=tUMF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFB9Z+Dzetjo4HCnE/YygvLDcA16uEjuAWRgJwk2xBi9AiBlCjJHPZWLCe1TDvkV9Vjq6CuZqWzufTP4zi9UJZe8+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-top-app-bar_0.22.0-canary.02e841b2.0_1620678860396_0.6731596801674562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.badda2f0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/top-app-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-45udB77d6OSXB91GRyJ9vaqPTUXSjlTttoMDPgIZxilXLtHVtrq5P7GRZTQkwCq3Plhhl3YQCUd1qHBLpMXmqg==","shasum":"096d05647af28c05b630cca84a398723aa8916ef","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.badda2f0.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEUCRA9TVsSAnZWagAASCcP/2nAE+UKx3MSK7I9oyUQ\nLq2dAAbkyF3CuDORb+xROzfvkQ4dLmlnMBaQFCWvgEQPANaIK5yprO9/ajxP\n5eg/vE69IUK/dWsbKluIJR+tDHMFKR0BH1HQjSQroNMWtUolOFGhanIN846b\n7/Ic0dLe8dhOrpIKvYZTQt6JOu8wQja/VTqCz5lXT6pbSYnvhy8P4gxTgnHx\nbQca7vZPe9qybj0n+YL67JHeYM5ivuwapUuQ+WyZIsHkDnsyk41JU8q99hPW\naBG0Ocx7pFbXGsgicrZuF1Ly7rAuQbs1hlQDT5JZFA+ddCxMjIga1BvVzaH1\nJJ1kaH7Ec/Ywc2v7AEx4O7RAYOAW3rDBUKZ5RRDpCOe2+ih6+UoTvlEG9KEA\npjcGuw1ue6dfPB3cRk8Co1VhB7BIECRyqGgToLg2QYK8uRw7M9L6gW3wLuRl\nqi/7IUt2mEAva2IeHV5OqpXuhI1q9HuJr2nsRBCwU1NBzaNBM5BVtB5H9Gs2\nehdbu6ltdrPE8ezVr4xQNeJwj7K3WuV3iDIQlooCzGc4GtBh3l5jgoWpJUC3\ntsmSOAVsQJbfRM0/0YNHXLl7lapzwCaQ/tAZ/YF0HV020E1r9L/n7ea3B2DE\nsuDLU0M/8Msmk0XeNb0JRRPOJrkot/HFVUJ8E5sjIr7gS+H3UNaccBL/EId2\nbLxt\r\n=0nDu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIjBCIQQYf0HoDtqdyML4vWRYJp0pEUjlTORIXOj1rCAiAKQ9l8Mhs497YHvAcoMyR0xbYE+lASStsZGhkl2QM8sg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.badda2f0.0_1620693268454_0.8865003720281952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.004aca62.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.004aca62.0","@material/top-app-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qFhVNea0IgdWsrvG/JMRoueOhZWl7xfhgVxVUjaKrWsoczdCenxcYwPmpsjBy1KSHDys/kif7J3N8Lwk9egB7A==","shasum":"886ef973e3ba4450c9cfac58296c14c25e03ae4d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.004aca62.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmseQCRA9TVsSAnZWagAAZ3UP/jWQ5x5ovGPBAuHOvP6W\nE4sLmBx5F25bX4nn2mEG6YM+pJYQr5iqV7+WTLVSlb0xdlV26U6h7sOVPcYv\nq2Pkq9Jds5VmLAN0BiBkr+tNUOpvhoBUT83Hg1EtVVpH0xwVcS/dYMSW+dsU\n/1dvBGzC4KZ0/eETm/6Uqp7iUiQwicBjVHszZqjA44DSxpXSZLsUWq3lcqE5\njTxNRk3zKNLuEMiQpg6XfWC4hwYHUX24G5AFiSjf7HRglKjQw4a8YVA7dNZa\nGZlvRFdMALj95U/Vr5OnF7U/PpDh3jb0Hsnqid+XI2NyRFbo9eo5r58Kunfu\nA9gemw+gV2m02BDTClF91G/GgNx4ReJFQuzhmS/76K4KrAbqcCacLNB8qF9M\n6hgNSdGzNjwodgnHx6Akw0v6LOnBWLYaUoEA/zHl6IJdsKP8IrvQ5o5kVg4F\nusk5Zhc0N3TtkIC+yKqmFory4GBCHE9+Gvzyz/eTBcUnKjQJ+yiRDDh2+cVp\nsT2tM3P8XCWkzzk+Im9b1glbw60po8gowZ1ryWZe0/8G53tCwYXRgaCAQ07K\n3wKnr3TrPhMt1Nlsk+r9jtTr+IPDJiq5+zOow+HE5yivBOZhulo/37eP/n2m\noKq8dyeXAPB4Y+IymLV3SI++jyBacKpRVrK3ObFemlinsODWSvVNTwwnu3It\nN+FP\r\n=70Eq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDraDO+CakadXv0QAzJ9uD+M/QalLbfwBmrl/RLkkC3FAiAcJ/3NeY5qC6XfeFiPsTNHt7SecBZKJKd3v6m344EswA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.004aca62.0_1620756368012_0.271408914272945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.4af17446.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4af17446.0","@material/top-app-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qo+Kt0EF7kXFExtcepS5srIbHikmG8emX9bed6JSdBD15oLiVnXt+afkle1I1+s8eVqDCygYqQxs41Ea33WOrg==","shasum":"2999e5e97d7aea816fd1fc5498c4ebbb7f1e87fa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.4af17446.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDnCRA9TVsSAnZWagAAdlcP/3878PJ1TshRkWyfyPrF\n6/64XPnhzc8JU7ZUfaUR+IoWt+GmZDMFKRMEYUe11jp3nfBoiDhu7Q/kpZcS\nOIgHWdd3l5CjKgRNEwNh9SLteg73yRyO8291If/ofixQX2Yn5CjxgqjkDJL/\ngg07gi5k6pQMEx/ydyVWI1gv65EosJoHRdKA6JrQ1Xt+uzNmIuvGtpnV77x2\nnwI+2IYGygceFV5BIFHdkcZmy/wyDuw1+Tft5uGXhFVlm0zSsTVaWdRqx6yn\ngeuVX/VpqWQ0Kg1caO7zFLK8rcB3S0H509WF68yPSwshkWpM2gznFRpo7PGf\nEmy09eNShNRG9AZ682ik6Oqpn6ECuxv32/1y2WKqI1DuAqZ9ZxsfPNBwey9A\nWNAL0qCBCMM639HUMcxdvpbG041Ju1Fgf3+s2KrHzipJ9Aspxk6JxcaOGSqY\nCw+QmOu41J/c1QthaJGKwTp9VCDPJdCNCGsjft3Z7mT5sWnncHdFNAfe9IIm\nC0KYE7OP6C/esjZkHDqoDbr2h93ZhUHha/+8FuPCAT3uyraDUDDpinl+48Yj\nd6Rf9VJMTSflY8oEmFKElQR9H5boXyfHhwROPEwWxH1nz+RQX0XPG9It0DlJ\ntFS3kxJt5rPmSXgeAxSqyjUZK8obaSK/FT8LhmiB/spQwUI88V1AppNkYQO3\nYeaA\r\n=ZzER\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFMSaOJErju/DzZLlZiCCThBRVRcglVgM61mX4TPgVnQIgDXNC7ov8L8hiMDxQnzkuundfeRCloPSUz1i857Hm/lE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.4af17446.0_1620758758546_0.05641634654939165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.b94d7187.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/top-app-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IxuSYSdBj4RZaZ+3qMni3fvwYeRmkcCkX7neLzN9v5GwEX2OJ4C6hIXbD+XDtvvTs1lkE2P6U8Hym8jMnupTDQ==","shasum":"7eaac69816069fdd6a6f55fae01ad035ebd4b935","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.b94d7187.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtIyCRA9TVsSAnZWagAAKxoP/3wHKKcELTL0WXdWA9A+\ntPN4vAp2sNPoTG2QKUgQfrUWjRt+m6z2iteT78TgEw/vUqv2oG77Zf+/lwIr\ngrNznW3G0IxzGhx0jW7I4nqPZ3IlNh85HGS5riwsWyTQ7+PZSubmKnp4VdTC\nJ2JXx8/QRxNgbXZM1X0s7A9veMo5O3UkwBnBrxA78ahO8+jA8/BNQ/Qd0y29\nXsxwcBheafJvrR/6qa50vYHSH7ebAnlgqUDlm7mja4e954qxr75yb5H0aDE3\nFvqoAEsZB5O/T6GjoZn06S+U/8y787OVpGC2E23L5+Bc4LHlW7ImEBtlZx23\nqYWaMAJleChNZck/7dcNHf77CLkcmOzNWAMlFYPWvKp2mHy+RgOG9W5lHUt6\nem7u3vWwa/Ul9CphrHrosJ03OpvrSknG2dckDYwqrLV08r2TcnB4PNCkZB8g\nOL1Cvyo6YNAdOfzPy873KNKQqJE3NxeooRbBoBug3h+wMNbJx3MwPf7XFBbw\n3b1sKt/iJrRIbrAJQ4hv7qF0ipR3nINoJX6V3I1zUBaIalbNmJ6F197ko8VJ\nP/e/OyM+Ahg1Q9o7nVWqFIpNl1y/BTa0DX3xIGi9SZTcBm0JFmzOEjxky0qk\nPekW4rkgtkPikFk5uK+XdXzpwoZ4fkSi3jjWTyq8CdLnVK5vb3nPyxIykWVL\n+adU\r\n=Qubp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAH4Wwjdms+3Kw7XOLVYnWeU4QAoM9zMNGLE/xPc49v3AiBnKh9zqLysofVNQpwoN58Cvjaqn3vCQMjLZCBY6HE0xw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.b94d7187.0_1620759090325_0.3238658456726584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.4021b2f9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v84xEwnlG0HrD6RRUGtodjq0vKHkrx9W9qNILtxunre/SzJ3Uj+cyroAaaGsV+o2u6I6rkw0kUU8fkiucHipBQ==","shasum":"7eaa9bef61d1fac0b2a49b212a4ae472a30680cc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.4021b2f9.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnE/0CRA9TVsSAnZWagAAmRUP/RnMPtD9efeA0/6bRsuK\noxOoldQjUzUVZAQSc8o+tRED6ZYsfyuBB+vJlF+HkseKFWMGUwBUV6HLIDow\nNPpqIeaNHwlzEEJYb8uXsfBEQkv70sh9VcGNZlL5SOuplPALMt0n/Vm1KzU7\nI/RIMI8d5g+yWxxxSOqUGzTNhnBVEp/n7ckfnK17k9JmVzCecHEbTnaBiW82\nuZ2Qy0wbdPgytHDv9S4oLYfpSqHdjsvp96wpjD36J2VXUriKFJ9j3y6EqU2Z\nq4Bk6jvreew1jrOHRhqMxZ8PfygacpsFu2C5ZFrqRAnO6PR7sAahRvvgyaWo\nMi5VE712oHpYIMUmB8VegJGCQiBEvG/T5bvhakoJ6TLqtsmdXDl/8K9p6NEa\nnOR1GLuP8NYsdPWnZJgRIMA4jN4s+9fQu3Ej3L3jHONuJSSfhhelhlT5BrUr\njmn5DCx/AcOuwgRwMA57xFobN8Pd+zws/NwiTk40uWFdDoVvNe0nxkUfRp5c\nYN46fP7MfptuOf8YLuDaVd9IfoFnQnHddlAHpLbIk7On3wvgNOVOvX7eiPBe\nOnl7eXr6uahTxKzcPrZ8Gu/AA4wbgVYfzcMR6uXHq4evgyxEa8hItNxSQnvg\njjrHi1NRULmM1uNcDgU+TxUfydjwM4PbnB3UHsNmBAa8YJOY/XEuLhcOixfZ\ntIyN\r\n=atGQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUXuDQs6JA2DzHZtW1cwWujkD/lt7uiLETXGZZetCcKQIgFNdayFwC/XquIZJMhWvHFUXJy3sU0GyUjPZse7YTNE8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.4021b2f9.0_1620856820508_0.3373342722776851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.6a5956a3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8t7PntxWmcJkTF27yS7NHhfXmTMYHBkXWeebMapYanYOLIvogW8tF5Nfv4Gy0Eri6fV73OgwtJKW7kxqpnvv8g==","shasum":"d225cc69af8b20933efde4b35aa1b29ee63b3088","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.6a5956a3.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFPsCRA9TVsSAnZWagAAs9YP/R+gEM7eLOSWnL0cJEvS\nzre4sIhwVwRsbvPS694Rr+GaayzqOaHljn8bSx7FMXyp9s6Wp5SIQIB8XGSi\noRhArz473KQAHXvNTTgqXDq1uOru6tBc/6ry58qXxzJSPXKNtfBrk/caWKpc\njFMA0jHWGUyoMc2itGUcHzq78A0KZIVN9Aeib2WHkDif5epQ/1o8nLB4MkUW\nnF2hsDlLRi+JoiUACvidnXsSK4/vpFj5koNcym9Yx1ic/wE299+JOkU3IfHs\nsXmVvkZadi74bksjT1QSy1wNiSti/U309X0stjf83A9ZxqkeQYOvtrpfA45W\n1nD9lw5XGg+N9pA02HmUJEV5Miq1W1bIIVcoj7tO1iNGVRZxsjW3Soza35QO\np9LYs0VKAGXI4U1iHG6AbQT7XAm48tL/bkPHxRuaq2P0t1GEwr+D/giVm+C4\ngSvibNV6rxmCxoYUJxfvDBVC0UmgPB1SjbZXLN7ZGoyP7xPjWj3IRldlTM6y\nY53khJFapoKp2e92ekMhgNyMYyhYSIJwhJnaqrI9tvAYDP2LA4aKZQQxo8NZ\nyNtSNuTsit4b7eNqXN8euq1X/bye+aLgqxNzb4UU0XAhv/f+EEUoa4SeoRGt\nJ37lfWPXoAjzZTe0L3NRiixgoB+c17xZSxiWVQsBGdfY8pwGcFXa+/mzZr6W\nQvEq\r\n=+6Rf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFfImML6HuZEe7cRFBlviajYZK4v2J66/U0BlnhL3VP+AiBesD6Mn7zMULKa0cuSfISdki1HZjh1w0egELWsQk7SPg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.6a5956a3.0_1620857835972_0.6584083271268619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ByP7K/yGTa55V5qN0kIyp7eHUMKG0jW1qg4aURKrb+OKHC6a73/YwKpLh1K1eJTyw8Yye5Pm5lmqVIaz40uBJA==","shasum":"349a7051800ecfdf5054f8414b29940b50df223f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.b6e8a74b.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF6zCRA9TVsSAnZWagAAHhkQAIBx9BVZP72w7OQkoPsP\nQrV1gEjcv81xpFAJKvZFdxCd10ASjc6lgTpg7bqGqwLf2to6eU3BfsQkl1PP\nIgnOqhyTClS4MnUhkX2ciO8jar61G7MB1hSWJ0Fkgd99z68eeUbMq46wLbkX\nZpIh8YosuLW7UQkhKBEswP3k9p6N6bnq1voGOOUED4YUH+ttdQ28ecG36J1c\nrdMVHdMTqaDtNX3FV4pFygE/FIdcelVEejavMiJQ1OWySlfUQP4uGvN2AFvq\nU9i+KGeMs/3J0Y1sgPod3NHmo6QKIdzv/beD0vGSYnDNAdZ/m6aqtP5iPwM5\nEkvTy5VaEIXnKJbPSau0rbuy9DSUYX/JgmcQGC3m2HnNwlgGbJsvDoWqqnYw\ntXTB6Ie7Z+M/iMCIaDRFzt1j+W7GSznYR7SgtdRoP0duH33Df+PxgofBkrin\nv/bn/U82Lozx/p5wJU6rmdcEOB+WqJsELREI/36aq6J7Ux+jMe/U9XnVP7pW\nxqwuOP0nYRl7gMdSi7CvEHls4OSeiya8Js6uX5+bKv7MNNQyh8H7ODfkNXYw\n8RqsRqywnjvjUiKSSLSBXyuYc6Na6aBEjnXVcgKGCId1EWcQdoADMXAHqQ6e\n4e2S/7pHE4SOtxIgacLWtzXxdk7Vfu53CnX20aPTwWa9TkKGt/76XVGCJvoh\nP1Xe\r\n=AUzn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwGaK5X9I0deLk8OW1Q4UJbv5NMkfAyD9V6YUdgiEKwAiEA2cTLdL/RVEOuxFAPqbLEcUZbeUkZAwMy1B8YJiq0VW4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.b6e8a74b.0_1620860594401_0.6015786442352766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.c94e1030.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3OJoCmQQlP26u/V60qxYc4iB+DE4JzuPHe3S0x59JCWRujfPHhZFYy683PdwDH5LY44a2Dq85FDbMJexhTFfBw==","shasum":"cfe737f0dd05a923269ae5b947eae09aab498051","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.c94e1030.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGARCRA9TVsSAnZWagAAfDYP/2ltDb+2KNLqbv51LJfp\n2vLFn8zbRNapuxBsbKXxXlnMvoapPf7JH2AHav3YViruCJ2SlD4uMU7PyVOL\nI3mItAFu2Nyd8v81q8l2l0ZCikT0gUDTPgmB9TUrDTMxDhXfL8w0rhUKjkMP\nZpVcbRmwPNTEs+paqtL8UGcZ0wpBM3bJp6zcw3qVsjXa2iaQfJ4vKKwmU+hZ\n5YDF9l2ahmT5J4nLLc3eLnG4JPIKTDDr+qIqOXiPlwddQN7iOHEpCL5B7GkR\nfYsWxjqoRoRevce7E0EBtROJLWfOSJ/9+TpFnIV2YU1yUibI/85fY8iQ/UQe\nfXpdYk8TPM+FpnxqwzPc3f8qCgtf5s+zYcJE1BRD2wpwGqaWs5+8dAC/z5Jc\nZIMO/uz11RqU9LSia2FLxpzEd/zhxUucoCbMyGdhPuLTyz6+cD7pGBOl4us6\ncVdnoxLodgn5uYkFHGisIubsEAiGUbiiKRIF84N5YTNTiRQAMK8QvomzPXrM\n5othHWZrnpxxE8HAaCEqJB93Tu9oqvpLLadlBE4UTZTY1xsUMQOEmBvcOQF7\nLs3o1TryDFKCFSF/KQ94S3Zr4aXEdGENAMhiUQ8tJYw/Q21U4QwXjYtiODPs\nz9NK/esG+C5Gc9achPwLqS4ObFAlkBcJ5r/1bHgfjQxOdi1n1DzeSJxHVIa+\nOrHN\r\n=WwMS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDK1FV8V98NjOVb/wglESrSitay0obekpl5f6uScPBENAiEAx+39oDXiZeAEFrPb0oddBu8oouGgVbxlEHbSwsw8OKg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.c94e1030.0_1620860945195_0.3064114198350132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.40a34e35.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ypc6rFRduttNCKkOgEeWiVlHhSjnTqbqELK4fJ1vqP/INyUzw6VZ15dtS0DRbbfZLBIo0kRMKGa5N1pjN1fVNA==","shasum":"e03e0befb764d099e51871bc31c76ab2caf54325","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.40a34e35.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuWCRA9TVsSAnZWagAAL5wP+QGtOKLOrJcMfmPmOM/2\ns41mWeD9Y9uz3eWBnz9CpLxzayyv8vuhZ6VPCobvRV7DLACzsi7OeCtP3Xfm\nvmC9wORHsRDmKydJ7nOkNKPfzJF52wnlPQyBx/AHCIy7oepsPn7LUXoBKL3g\nbbXSo1KtDM57usotuZj16lPEqtecgxViklFC4M0fxSIM3bzcWeM3FNPV78+d\nwqiU0hDml4VbmmuDcrZBg9TlBmXEeHWMTKh0wGpq4zGVxepyESmB2ox57FcL\nojnH80f5/7md37ASDtn7y8vt6nJUvm1XqYG0HyXmozXTyc1aN+x1+41feDG2\nLMOrH6cXvoh1l8hD0DEeZ046nXHwNE9YPzVMvEMz6fqcCStIBw2xnNJF5XRB\n+WyREtqG0gaj6STLBnT936gNNj86h+bPbCbI04VPGfLyNsT7dGjndas5fOGS\nOxlJM3kphWdfSIug7TGJruOC4bpC1q5KnVjHIv5O8a/6mRPzHOEZUBotZgph\nmzsOl9A1YkfErt//9EpHvwMBshz3rXT5hI08LQQpjiY7jmEcmDepBLqrL7pN\nFE2Lyvogw2HyYexR9+6UqciKpGY2dolS8YxKq4SnQ3oV/vXNUrOehXjLEGpE\n4Ilzo2ekm7PMtGE8dxe/C+PDaDY+fMzYlc/8Ib/ECOAXD9wMQus/TJXOwK7B\n4jhB\r\n=nt8w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfy5mOcrhmg59vVTB1ZTMPPUUvKgy47F8YtQ7U+SFt5gIgLkmJnyMpLklXorg6k4+PYwtY7MWP0q0nnHIpy/2H/G4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.40a34e35.0_1620863893582_0.5005865939486764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.1be14d2c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DA2F1C/pHDtwj0NxBX7T0JyqSOA1LOLzUeutm8NXF9VzEuhbdkQ74hgyWv1PaCuVVryE8fec8LC9TN66we37ZA==","shasum":"411819de97bc81e7e5377549beb486e7b22200f7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.1be14d2c.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWa5CRA9TVsSAnZWagAA/6AP/3ah+SqC3mFyO/vIE1MY\ni4vPANdkYK6vLCeGMBPxxK6Hy38qrlelkpjc360NKOAkUVEdb6liy3PavCJX\noYfN9GjwsSYjPOLVqdB6UCXNaGr/xel1naG7kGCZi91NMK3Ez28T4n3Wbqch\nz5llX91Afy0Ocpq/wF0r62rLRj9ykXL1V6D1kKQHbe3/YqCp7jzJBwB7LeP8\nMNxo7CPR6YNFk2SmhbNYEzgyJbwOGVrdScGGGTDbm2/j6fm05QFsvLZ10YhG\nrOrKcSdVlJc/L0Pa5k3S6jNfpBIRsWXPzeTUD/YwmnJylFGHtlakGHshzhDd\npiYoqqHq9fGtTTTfdGow/jT2aykxoxFOrHB6WMZEiEKa7ivgmMyl7PGhYSPu\nZSny/l9lmEEIFQgzQt17ExPvtwjYMGyoBvafFnUdBvmQLuL1D3mhKgPv0R/K\n84+Fi+2nguOBo/44YhNeteU31LG/kV4zZiM1WAZHnsvC1tu2KEQnJx3Bfxim\nd9iEfPe8bKL88lJ9w3pJhiZ0IE632VcOscj1Q4hp+nuDsvswzd+weHXHIec0\nQVXgLnb55nsR9DOnxjVmAUAlteOUpnvKW93tCUPrWbj/SGheHQYgj4kz1c63\n1SYN9CZcK/KPYLG5N5FcBbe2W2TZxEHXbE+vc4fY0Ih7HZ4OhUUEKOYBryOW\nnJpE\r\n=yotW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEWa+Gb+jaP0NVNMUEGygAIXjc1LspUL3tIidHgIVFS5AiEArIkdbV6x+31bsyF4NZtgYHx7ivBbQDxUygX+KkVU4SE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.1be14d2c.0_1620928185542_0.012295943184567504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.87dbd64f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ScMpML56VVtAwYjOfKRtchvlMkplhmGJQU9ZLrel8ltEHEm2zVVMtUBh3TYv42GJhSwGdA53D7Yk3aHGsJ1rTA==","shasum":"e16d562e62d795a70931dd8b5b644b0c59f2854b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.87dbd64f.0.tgz","fileCount":16,"unpackedSize":66390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuRsCRA9TVsSAnZWagAAtLQP/jKgtugdkZ7ay1PXnNy9\nP6uIT7K1fQF0xtXAhHVV13BcLCwAmR2go7GtPwnJw5QQTM7YsWdaERWRa89S\n281gFq76iHWTpu5PYPzzIij1D1svjv1KDShCFY9NMJqrkq21CUo9SDNan1p6\ndkEogeIWVsy4quvQjJ9Ok/YjZtCVwAAYbR6PwzoBtTLsd1amr/Azp18IieRB\n/55JLVZzzwSafuyFQ0eDAvfKouycbl+gmiZ5d/drXV4cplFfN2tjZZbQI7g0\ngMkvxK2+IXBgSE8t+hOnnrfistijrg3nv2rKfzmBmHSrdg7yjBUi6sMc5NM8\np/vLLXXHSUXqlW+tLUafKO18JqmSVnj+1fIS4zl1HMhIwh/OyKWEQFOQel9v\n79TzbgHqn1DSR6R6xMW/d+MqNnhgO7iD5QX+Uc/yK6XGWunX6O6i0g2zWb8O\n/XksPl1RMPlZncFcBlz53tNTxKZWbG16KuB8EzMqKb1itdgnidr4PV5Yg/W5\nQkpoK6rAUiAXLr631LFy+PcDHMQF6yjsUwKvSZZQ307Fx6OJZ9snJoaitcrC\nIGQmEOJvekqEa5licigKTrB7tiSx7DxkqE21RmGeWGVO3Fowf6CY38Pxe5PC\n1PLWsMZNeJGzyWvRnnwdDWA2YYbyI2KoLkz6+dM6YCR2FA0RWwO06f11VdFS\nJ0BS\r\n=Frrh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIClpIAkcsjms38ESih3EouoFzJHhW2Oqvuc4mjT1IsGMAiEAuWnGgcWvT0gPCN2LoW88iCH7IKF3Q4Ola+WUfIK6WYc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.87dbd64f.0_1621025900191_0.6144839660277648"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.c452e4da.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zlPI9IBBJeJ7MHpZ8VlQOw0aW9454b7x1yPWCNvuDQnWuiWc0pNFoHWxMX9s4P7syMI5XMdDTDRD12rM32hTQQ==","shasum":"c384b23da50d7736ecf8a627900dddc83f2539d9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.c452e4da.0.tgz","fileCount":19,"unpackedSize":84363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovzqCRA9TVsSAnZWagAAeawP/jFBmNwz6RPQUqpMGTKR\nd0yOHkLp6Ux6apszlIjKj9eu9F2rv47jRrXvNIHkF09oWetBhuutaYD3r/oW\ndtXFehrVw1qbD7uGoaVsAdRfe2zsUFcDJ8/aINllBnfF7RtwHIgXDTNe2crQ\nFUd33xwLSMNeAsQMlcOevJMtmGQ2C0FVuplRwglPTxrmz0FNwQ75Q7ER5YvE\nnBX+zagmLc5tncoE6djDNISoUnUdRvjfnSWtfD5cn+qftYl7QeLd/+SBPFhk\nYYU/MPnyjpupCOmO8R85brbIt8YNCqZiB+VNquLn9a5/7vKobarXkywDTZCi\nKtQXzk29okgenXZj1ZF45R/OwLaYMbsg1Pmr08ayD4AffcXvatTmRuaU4wUU\noUSNxxOPDlvMNR8No5BVhApUMAcc2YNV9Y4hKKr6jQGx9oGS2aOFqvjeNWIq\nceb0vLz/C5oEJy709PmoSegCzc85K4i37ZZL0SfD2A7a19Tytst9cb/mt5NY\ndKE9X3qtv9+LePGJLVWT5cVybyJ645TQKvkn1BQvWktACgOmouVSgAmfZH3a\nDebX1UN29D5ncUvwwQEfGC+IJmDWupKpdvBwr9zP9vJqBJ1MEA1BjOkeKv7t\n6NQFAiGVx7kQZRskfmPT3usMuVJrhU0Oi9PHzG05lyrkGdM55XPlKFtiWS0F\n8k5S\r\n=D6NM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4zJJsU+jZAX8GXbULMG8YPe3MX5HWKivankbBTWI+FAiEAkdc+E/VjhAm8VNJXT4z6lIsrQYxblr/xSMbNzY0Xw+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-top-app-bar_0.22.0-canary.c452e4da.0_1621294313691_0.4868913729955644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.2212691a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2212691a.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2hg+V/a2G8VGIGPaFkYja2ZZG6VGX7GZ8i06XetbmxfQF4qRB08NJPRW1MOr+BQI0U/bqncMSslEEgWud4XN3A==","shasum":"d12dc84cc294e1a323ca935112ed78218b3cc4a2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.2212691a.0.tgz","fileCount":19,"unpackedSize":79776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowG/CRA9TVsSAnZWagAAr+4P/it9rzgLaacsNc17CThc\nBu3vmJ4OMGpnum4NhOp2dJOD4gDvUMxaoqYkcPXyHHRtxBu5zWE8PyaeN6Wa\nBj4eW+HXHiAIgyYz/qw7MKto5LpYr4mpY3NYVk7Z7kZciXQyT0sxtaStYfzJ\n4QnKv84utStRtQjmVRb9kY9tLFLq6S3Ae57CNf1KG2iRSYRzJEUn6ZUwILp3\nRcGMIzRse/YeycyJEwc9WSKdexBOfWXZq9YjW9fvSSAse4pVpEad5xG9Yo2j\n/+lethNtp0PckWxaW9SprgHpZCejpmSg9VGHi91vOTI472vaP6h7kI8C3+yu\nwz1DdeFlxaeMb5XMzLrX4d8cV41Vc5JPb1LhdNSqJhx9Y7F5i/UxKW3gJZya\nu5qg4+5gpNNl80B65+nUZ8jit7cPgAaP5dK7iYhnwJ9rsepXqKSdFtG3BQi0\nlstVNGOf91ngfjiaqDbMZmLECSb6Cgcl+25vR+N8ZbnkNwQKptnwVt+B9vyI\n90pm1Io90XqRhTSwk5O5p1YjO6Df5xfkbCQtgbcD191Ws7F830uf+GUqYDCy\nteCznteWpM7e8W4rqT8U+fRSaX/kJjRIV90DzJWkcfBiRU9mfc/fpJ/0dCBJ\n6yn3b4fsFu4CN8t6fdw5WewqsuamMiPKwV2fLBflvKfTgveS7UaQR1Ch1m+Q\nIcH3\r\n=fOKH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbVq8XEignxNdPxfF+xKzgAFsSlLcOLWRi6uHCY7HxNAIgQHYJF/6PDAsSNl38LNthKnH0SESrgkG96dwC4/1tef0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.2212691a.0_1621295551109_0.9271385540814849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.f748ff2f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OzRvobZjseLUnUlYH1XyebAgyqzv/rJpAWqYrwt8nqPMy+TVudUUxvAVnoy1TFLkOglv4fi5jrKQVprwvKx4tQ==","shasum":"9e28e905d9d21d09098c753ba4700ab3bbed1142","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.f748ff2f.0.tgz","fileCount":19,"unpackedSize":79780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowi9CRA9TVsSAnZWagAAGygP/2igXjN14A/0YxlRGAyc\nFP/+khhR72lBJ8bLJXKKS+AAwtQM4tp4fnJotNKh/UZwDY6KE2SiKQ5RdXBK\nPzLa+VXSGsvr+9qQzDBjA4dksECP+gxt+plSqFnFD3OhDH0xEhrNwfesX/OQ\nGOSruCSHq+BqcDf2HuX29k09QT+rnnoGYkbY90kRDvV0gSEUuyD3GoTpFrCH\neCN/7MFPzhn5uRRs74kJFDB2c0iQk2hnXTlq3a1B96SnAjNRPeMSgeWzbFus\nU5LtWSpWoQ7DxS26gb5vSDNyB9bFHFslE4RWk4uLGOQgaw/3QlWZoaSrjc/t\nl1WwDztsOH/Onv7nZ1W80gSuRRj+NaOYOfxIUEhPZBGn+7GuNI8JeS5qD4YP\nuLvYbhYpx3cEun38Ba5a3BPcoYfEgGl5GN6m4qUT86tan5Pf2JUU8KZdKlNa\nlooHc4bsfcAaHEFWmW3CeaOQULvg/VoxLJ9YvO2Y2Tw+1HnHuVXvL+abdLoj\n63gG/W+JiJEEJU8/KDfrWaqRJF6iPkx+oa8G2hCVpDyr1Bvtl2oApeEhSOXt\nsmS5XL50dgUwB/OYkUHwgeIjHnqh6J/UDZBrBwYjOXrlR6VRLXg3fEKayvkG\n5tCRCfWil8xJpKI5R0+11avwbyYZV9LYvkHAVdtLoCi7p/cMIKHQFmcm4USN\n4+yH\r\n=cDyr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEW9RTfQa9PRnm/OLHc2iF/fpOwDRpN2BTPuyeqPKDcqAiBvQSYkv+pOmtX8xDebfiVItEpGXfQor6irKVTS/mdQvw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.f748ff2f.0_1621297340459_0.8927010396029409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.cc04657a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NN8b0Qqlt3NCYKMP0BbC3p2ougQl5VVW7VwLKFGCzd5dqf+ir8i/ZjrhL3ZzUNV4E70/uBVa6PLIis5ijzF6AQ==","shasum":"448059d18129d81d6151d0c057e65b9f3ccb5e56","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.cc04657a.0.tgz","fileCount":16,"unpackedSize":60886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZ0CRA9TVsSAnZWagAAmSEP/Rf+mQPwaUrx8immpYF3\nmjBxFPYfouOoaTS5kd2ZJTSnaZ5+ilCQqJV9ylzMZCkQ+Wlt2+yMDqPRrRLe\nikpwKJ1hQECSWrztf9+8SV3kBakr/werExG30zX0KDdPGMxSIpL5h7xPeV71\nvH8Ix4k+weoG+vr+fms+Bdi/WVEqfrnBDleVahjo3T6qEGZpV/bpekS1K9Rv\n0Y4HGDeP4qdkYLeDckLCvWNA8kaCKI9KbrUuwO6neoTvZjUTa+dlzKAB7drO\nbfKd1GP6ofBiJoPGi/Af8PM2rYb3dbjzckOiUoW1otYoXf7XUTkassFb3IH6\nuMkukF8yl5lwC6OQgZlPg/9/vLmVkm1I08XPTWgUeJqVIHTEXiEVE6WYHtOl\nC4u7eYAY/vXEQTz90zAWBsYXEMjTWiSuRmNVhPA0izcbVpet/Tshel58Cgqt\njyAgoOPUW6I6BV2OUzYPI6Du9wo14wL/M5f26Z0HA56EvmFTrSjolTvsGEez\nu5FH1uRr9GJ2lV8qA+LSfFB7x0cguQBtw/DNd727TvrVP8TCtMS7iy6dsv7U\nFZpwjAiGd/Fc1/qDOjjoPEr/OI7yccmqhejtIUqyHmNuFmzxDeCYy6s8tlDx\nA8AmDrUE4m1L93vf+6IwZJSsW2hB0H07BrU2JcWYWDuSrGbOQFpu25t4X7Wi\nz+uI\r\n=uG9o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCg5i59EjTVewVQ873zNaOlmpg8g7NNLOqz8vYNK9O9AiEAxANgra+QYzuqGcAv8IVHrz99e+BjQHPL6YNwi2X/N/c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.cc04657a.0_1621300852348_0.26072897141365936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.3a3114fa.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a8An0/vnWUxocyNJvFHJMGeIfl84ArOmgCslyeFUwwi2GGz0NS9V/jbYU0TfCVpa4J5cY1N0bY5lWSsX6Pf3lw==","shasum":"fa4d36235b6de735508efbcfbe9b37bbaacafd82","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.3a3114fa.0.tgz","fileCount":16,"unpackedSize":60886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHUCRA9TVsSAnZWagAA1RoP/15L66lcymb8LbRtrl09\nXQwXimPc1dPpUGi71pYDRotG0rAOL8rdVwC3/Yk9KxBhDUwUL/YZXvMPzMxN\nE6lYww9wyz/mwIj8hHLAG2PK5+WuuN3rXWxjpmemgUFNwY7hTd7F6qmHfitf\nxw1sd3A6hScrwQgI+bsNeFIlRbaybaDb52fGsRY9YS7bvtETcDwNKcegH3BH\nugpITIbJfI8XIAUaAN1SUG9VxX/OEyMLMh/Eu3Y+qQj+y34GP4gnPkYc6eue\nkjPt7elyj95NlHBUvOB/uv6T3OQvcasuavJ57Z+mGpIiWv8R1OsRt15gNk1J\nxr7aFJLVnmcWwopLQc7PN9QetJpgzH/gPZGHtvMZYtzuZzF4588uMcCuYfHj\n0HtsIr/g0DPN9FGmqTV2aC0BsPgvqElPTsmzhfpXETKc6iBKVMNeY4A08zBE\nlgP98W1yMwbCOGQRbxaCD0N1SScUdVPQ6DU27+t5BwiSjV2YcJBQpMN+4g/H\nVGYAOif9C0z4SxCy0N3Lus40skqskJWz8TRDqC1czpMV2mH7kb/cfz0PB3Dx\n1hiM9+ebl18C3NdalTEqryMzZJBbYIrqAfM4w1EscXP65WWNokS+9qasYYKm\nB0hyf9+ZWvQ1l5Qo0eEhi5kfjQYqwYogn/NptN7oP1uECYW1lz6sKijhH1Xx\n1WKb\r\n=CBfL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHF+ceWmIsR8xkpaAqfDVpoxPuu8tIacOl8UFaTgeGvPAiAEuyFrZc+3nVPgvaEPaN4G21S16Rm+2fQLjR73vAfuIQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.3a3114fa.0_1621467604061_0.26017985244682196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.b46bdf83.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BN4Pdgvtmb52fKac+yEgLK0wXWJY2eOtCfFPdYzUusb3tK40MRVx4ycMpbHv2SkwcXJT/lNc3DPyWAq/H4aEEg==","shasum":"d80bf9bfca7e851edf69d6a0797dd629dd936f4f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.b46bdf83.0.tgz","fileCount":16,"unpackedSize":60886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcB8CRA9TVsSAnZWagAA2ncP/2tPC1mp6obQj6mNNaNM\nZqfo0rVqSMf9tHjoBFEu5yhwQ48Uu4L6yeX3N5C1bT2ViGHRzzyjNkpKzh3u\nWKWkOUut6VPuVSCahTgtzjaN7ur25Np8qphnf0i5MhNxIihBZlJSRnBD2u/4\nt5BDpoRhyVxqqX8gKEI0PajOp9ZuwqzJEMDdDos1OUYPRPoul1S9mpdhf3pP\nRyUHjlQTWb4VqxTCv1tUgbKyQrhsE4LjMpsn8NTE7cJT/7/VvCHdctWEUNe8\ng6GyiMg8B2onpqyqxpY6zt7Zu4lTzJ4GmSTPkJ8iPbq4YHGg0QbL+fpJo8Jm\n5cN50WD9ZzQsrMInn8TY3K9WKI4lmCln7QhDe6Iaz5ACxyqvEB6XLgwLXSsa\n0/PDbtINlJddo+zwVE5i1ec7eMRp0ysljUEe1M+HuyKtdmOQb+qgwV5nziq3\nrhqVBYblKmfQltYO2bBlKMf6JvPYk0xKASgbekTnE+6Thk3JROlQ+q5dtOjR\n8RoOces+aCKXmh2GRFCFfzNZhMwSo6/XvRHW0Tw1l60gZ/pU7yqPfo7Vc/fr\n7Jw4Unmw7x2nPZbMn3LO4ZG9u6Thdf1VZfIoUuR64uafrpSP+Cv1fyZIZeTr\nJh6a/eJVjkPEdrQ+WJLOnOGE8HVf3lxta20ddiA37tFZpR7PgdFlhhVN2on7\nLsx9\r\n=fOWw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF7Ics/25ZeDPr1y8YSOnMFL6E6JOFwtPEcGWMIIUIzeAiEAq5jr9UScEfD0rtG3UUU2qKOQzbuZqYKyrIm7CZDB850="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.b46bdf83.0_1621475452124_0.8773611082954627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.b401a081.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b401a081.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oBeGfyqt3E5wXnyzmesMUPuAVoonr/nH58rg0fl5JT1ligksE+XkjUJBNWF1KdhX9qHP+i28Gl8rnO7KAW3b/Q==","shasum":"b987aa0e8188f716084df6aee2ef72776828d842","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.b401a081.0.tgz","fileCount":16,"unpackedSize":60886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDLCRA9TVsSAnZWagAAQd8QAJ46yHAUqcnQ8wNp8bwv\n1WJHcDSFSy7Fmktj9mkYJQK3wEdjSOfSIVFgg50PhRaWoCluiKbMXflRkrKo\ndZg66ztgbZT6XLQaCgJ1eyiueSEC9KrLwxUujYhVHkgA9Z6R8Cuz7W4+z4Zx\n4gZdENhRKAAt/l2Luocm8Q/PN4HwRPq03KLtySC+pgb7zNoO7ZHls+ahl8/v\nhyynBdR252uMA2PxRUgUmEcZGVf5oC+wRuz/vlddGAKE5gQ/W21sR6oexVlm\ndogzIX5tOFhP5WIraPRWPZkUL3K272O0NwSZa27T9JMsmzw7PLI5WU1or1Xn\n5Ragz16oLMQCZEcHQeeNC74EK4NxyqOoBhNAGAvhJDThGUzIUFtZrMFQCECB\niOJOBCL7rN4X7jigR6PW3h7aX5mxwEf0+dAxDN8yaERTcatqcNT9K/e52+7G\nY9dLxRe0OtSCnZDxBeONFW+BbEqIn3/tnR9Hy6R6VZAU0bFwAwl3/6Fy7iVA\nhTwPa9lzBWLp9Drhk4PEuIWcPqzg6rEh5S9e2TfZWcbOVeBt4x9HLbvqfJSH\nFBVEvRtqfZ7AcpfVH7yUMZMUUqxkcASe6UDmoOskGyyX1KhSUr0PMTFudcGS\npGf1mfL4dsaOSU4K7Vzby06KLk7w6UhOI6tv2jAg7Nb6fSHWUQ0Mv0Yz0KMU\n0xIc\r\n=CZZ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDfSPnI90IQVFVoDdkxIxmFqGeQ8SjY/DPwiJ3oFCsK0AiEAkeMx1YowLg2pankLIv4Bc+qEGy1s1fjodaWjNDn9fbY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.b401a081.0_1621639371467_0.7743360712066858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.012c8dc0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EEdkVb0+QZoQc0ffh5/b9lApbL5RmWqhMN+rXSksGNi4CHQAwKElMBZMz2KquiDXrepX/mM36QHFKdQfey6Z/g==","shasum":"a6acfa5cdf660c5bb8c3932b1c7574817c932a74","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.012c8dc0.0.tgz","fileCount":16,"unpackedSize":60886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1TCRA9TVsSAnZWagAA1C4P/A6UtuEmdvtuXJkPyNtI\nANGg5x9H/OiSL+rU7n/+Gr0DDBuWCr4FKMT7HsAyjMdDphQ92gUCfHsepSgI\nZnoB8pW80kKRCBHc57pbXML/2KjVBeHOYMb4BCpOA9kQujqpJycmaF0M8YUJ\n9VBBijtDkvQIcTEaI4RdUnBQonyd7W9NKI5gs2eovl23LROUKBMbjPKDFfeP\ny+oyFvnaZ/t5NERiOYhBYii15YxnL5Y/wlRZ291uTGSVArQCWy5/776p4Uxq\nWgkKIEqDvD74iFhKwfzphi/QINJDisfzfxkvaGKpoc9psamidBK3/F/e+WmM\nELV+mNnMetMWYKimVRE0sxktw0WQHXxYOe7dWL1TN6F8+QVbislHCeinDLXV\nJPErd19wfxZ+NeSvT+kjlgOJnNkfh/PH/4wz1HSTZhdL3SgAlH7xrU1M5XqI\n6a/CgBuZjbFCJjkHaJy/+4p7Xm1VcFGNi5TL55jlj1vDaqPZ575QZWHncuXU\ny1wdAFF2ac9ZmBzXtoMvHwMCwHec+ib8HcjVO3+aupQRdZM6/pvZM2jZWQEO\nQyWLSBvQF/k+9TOfhxzePuu+HDNHMOOMY53tyvHGO4Gkq4eSxM5erCrTWJm/\nmlP8qB6XX/QJy2/2NtU0oOpvg1m2/2LjBxmxVwdFvKuMFekwkj5Ui7ybAmOZ\nWV5n\r\n=EuDS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjnaZB7SmV+kPCCWZiYA5pyhq7kUPrS1Yif1WjIk05LAiBAfEcoxmzVz9+vN3Z0zhqsErQseb0jfiiYYykhHZcSrw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.012c8dc0.0_1621642578826_0.7390818120158795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.e01a1731.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-czjaBg8cOXoGT7YA1rNRqkTKR3HnQqHJHbSixVzjC6bdnlcArpVQWylucU3lmaoF43zu7XuUHuXiqf7Oo+bQCg==","shasum":"3e0ae97f160e52fe29031d39c31933acdead22b6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.e01a1731.0.tgz","fileCount":16,"unpackedSize":60886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84gCRA9TVsSAnZWagAA/OkQAJNJUISCH7Zle3WBD+gQ\nsqB2oAKR+HgjNOYWsz4ytUvZIrZVDTvmdvlI/FokcUgr0T+3OfPg39nvGtwB\nyMFVvF7eOtF8QzougRjGXGBU19VPu4LU1YGAUCPwlgJTTdT/P/RUZ8L3X8Su\nGaZJ2gwLAz4XAmA1TOnWHhBKO0tB6uowDtz4svy4JOQESDPtTy+bp43wLs2K\nIqr97QqvqYengO/Z5igLlm1jZE7c5R37TdvX79qN2x68Eu7f5BwI1eSuNw8q\neSFD9rYNn466WsneYoc87HmoBi7rQ/3t3KF2MWKVkhrLspe44ksXOgvhsGTL\nPrtxS7164tqaaLlDj4WTnTWbKmL0EMX/5r9BCcdLd7KRzPqxy/Y7eW9x6SJT\nTYFduyq5HM0ecQfX4YwNoT6Nnf5dIkKyyyNuwQlb9kb3UhD07PQj1E+VRukO\nhSYIfZlUOCTPzxHUQtTIekiAaW03aTVRd0hzyKA0qbASy/EdO8iVUlTNhSJX\n8hVCISSOpATV8GDVigELEk8F2AtF3DygF3Q2yfoT07f4mNym7Gup5QSIYteF\nE8Kwm92HKKcHlYE3UZ7H0KW/rL5w4ocJRhb4Sz+ZaJqgkF9SzS8G7BKjpqk9\nIMKJgX0XAJ3N8Z0lq5J0W7LaM4K5kD0ud8XmOjScm/qC5UF7GC/Sv3LTlXa8\ntPme\r\n=OP57\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2VkvTSyYiFsynT1l90uhjb6lhTeT+rOe0Ek6wzVKtEQIgXjjYhc1gaGbBJ6+doXCmAlfDvKBALofV0AdCV5l4GYI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.e01a1731.0_1621872159600_0.2147440495064381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.59174b9f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PSbuhGoUpxfWxx5483nD0MDLcd3DDCAJhu9InVURjc7xR0VGKexkwPnkimFVXxN712w1qpRB741gMvoaNeF1tQ==","shasum":"e232af21c31c595a6b28a33e8bad66d2c68bbecb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.59174b9f.0.tgz","fileCount":16,"unpackedSize":60886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTugCRA9TVsSAnZWagAALegQAIS1ef5pc5zOwjBee22F\nOVrbV+dgP22aTMRUXhiR3JxOc2ZRZPVRiNQWNM8XpnSGH7zGQxciHxx2KFti\nDMhiWo2Kdvs3hzhByOvmXi/hiWChgqG5GnAyUz5DJvrGdrSUNCp85lteteCO\no9nDY78nfmV398kiDgbEmQEt5L2v07tjit36TIpkuIobQAu65JRlbI9UcSJ/\n0qSS1fyWqpEyNHsBscHMwlYc4PlzhLztk4mGAHkfoQU6vwFw4iK2xajLFtqZ\npj14y4hVHMrGhWltwGPLg+jynrXPCBIwy4RcSehJG/IcmgiXtph10our2UiZ\nFqQuJwPhvAd/HebKeQjsDrWwBhdvq+cMDnJOL6RxjPtn7mz+Gf0ti3S+cRD/\nSVqwvoxtnH+VFvrURt0LiEv4LhvCnPAwW8fDwQOUwBsLu43CNfOgrO0QlOGh\npOKOY7EzwejHGQcSbHrzQXowRbYkn0cz/IxbzddcX1upX4a1xhyKAUMHUbUY\nAfeUB4o9RPf8yfKSiq0KlOxVEoKiWnoyRDDG6kmEzcacrWNhfC+CAG6VIFJs\nACP0Ms7tHegeaq42MuPpdAS99ra4rfwqHleh6GHmf/zFKb2HHcNxEDIIuQVn\nqWg+bYlJFtc0DYNNABetx4JXJh49EArCeU1w/FwGRshIqtj79siAyLZ5FDUU\ndgch\r\n=c3ub\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6TeGGe+bHbbLIuvLVShSAdBOOIPQURgTmVbMs/rFMMAIhAMX47HSfOmjHv5Hs5x4X79SD8aTjuXQxW9EJfOmE4f6v"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.59174b9f.0_1621965728070_0.5943156621134167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JrDV2ZIfANd2SfMn4E+QNAhsJhqO4zUCKP9wltPHryQmR6f0OpJKvI0gEEYjrjoBWuuRsmfo3MX/zTxdrmfO/A==","shasum":"8fcdb12cff23ee48296f65dc5c54c3238880ccd3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.c96cb2e0.0.tgz","fileCount":16,"unpackedSize":60886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwNCRA9TVsSAnZWagAA5mcP/33uAI9uy/iN+ECKeUng\na1YoBbkpm/Q0vKngWt8ODm1pMqXoI6g9ixyrVgvI1DDojQOmB5TtoE9aifSa\nw/H+SQe8hVknp10cMZbSljMomeIcd6hA78F1nfBYoRq1728tyfiqj5H4aQWl\n3A0pB0wcPJDiuPaPTYsqE7tQ/eMtoDPXRjcAh48uR98zZB00p2ZbN6iNBTmH\nTt+Z23zGrO9gt8Lm/TbUdLYSvskV4rKsYJ30ECYQpeHQWWDF2rU+rDOP5fgl\nT5B8ersNyyobDjg7Dru8p7dIsR+v6FX2mW9+GZBlZG7aaOUWMXFj/oDu442N\nJITSZKFnlKkKqUoaGX7tWCFov6XmF8FEiG9TFyiaJ7kY9tOEXBeaxEPDa4R4\nyNuFQ6P24EarB49RGPWx90SVwM5cHgUy8wrBu93WEMz4dHsATgghIjhXH2XO\ngHi9DdkF6jUbo2PISC4P2k5tDfI5QFFRTxD6uWI5NdxLWEo7teRZogrLZEv1\nQslU09LdAk8AGnVybqMAdph9/3QCsXtmbwldRX4ygHX5cKmlPO6fe+sLnlnA\nKKGWjyZcZ+gwah4B4/4bcyk4L5NuyOZ7oDFqwa0zXyN+xN5zrDOv436drU28\nyhcly4hXGQ/HHYEHzDRgvQViDaBruaH8TIipJdncLX7+Uo3NZWQ9xACMLKqX\nGczs\r\n=yF+5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQokl0x2auy0rHjM812FPPL1IqoGZiNfafiwQiCeAPqwIgb/svddi26+3V9AVKaRarrFd0Pj1etsl6CwXQPXMdaLc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.c96cb2e0.0_1621969933274_0.7920127938248547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.b9b0e330.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PVwH1IZMf04vHQ0rFi3HGaZbx1oTuEE8NhKXArnjuX60zAju0IFbZqTYHovjmXN6wW1wO/OeYhc1KUS+rfRReQ==","shasum":"09e8a0505d0cbf05ceed22bb74462d3e2f5bf7bc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.b9b0e330.0.tgz","fileCount":16,"unpackedSize":60886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVfCRA9TVsSAnZWagAAX1wP/2csFkovFXEvWhb7T7i3\nuQcnSS4NbfSZKj/n/kn3ODdOnYBk6+JBPXrPlcTXDW8uqXGZcEj2Kb9U7Ekn\naiAEcm4dtIJksnC0We8iuCcG3A/hCQ0/Ku55xK3wriXFqOL6O6CsoSRY+F/H\nrjyagYN1c5epzpyNpzc5jc8QwcwWgGXyxOkbF6IStHer/3XddoMZBd+a6naW\n6NcCJU6xaoTv4/FLXojPTTdwRSHEzbu3uSlJHrFXj5HRFt3GjSQHmIgyC0Yh\nuunDgFMm+pgeQvCJqRVE0Jk0HNZ5U9NdxtMyVVRWSss9xk3STDNAuMIfZJ8p\nJwUh7EGpTiREiTVK4biJtkpLuRl/8iS3bS3m9nlHGHM8RuUyTtA12hu21/iG\nhPvbSrwr/enWG6nCauuG17OU4s8avkXw+DmOVGXl/61E2KNGRha6uFjnDSAI\n1XtfwDUs7KEJTgfYETQg0LV7ttuT1xe3iwW3RZUk+039KjTzTd1sHTIgCMNe\nBlU4HoA/9g0UmZK0K2mryNISWsrbCaT4Yh3UjcIgQmNvwpMBIOmdb4u2qPX3\nFmTAqyNHcgXBe4UZxcx6DBZHdayGsbdKxq+1tuJUs6NsfiwwbvxUXZGUm4/w\nGchkFxyQM7SFCIetvEP+eAAS8LgtH4Inwekgh7ZrP5UxJB9p0eis4TMnd51T\n7spm\r\n=APBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDddR5+ODLGaeAwxLF/jGW1WsKDVVs5kQWj4XZbzXGvoQIgGmwexl96wRFkwxmgb8/u5Pp+6PhxoG5Wwxpcs5YSD+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-top-app-bar_0.22.0-canary.b9b0e330.0_1621976415394_0.08602545470106882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.ea2a8063.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zJdcdaDWbKaMqmZ+F7PTOVHrrS9I+5BmmI8MPIKX3T0kJFBoN5RPhzX1rWEfzmUtEkgGFJdhCGKgD9/znfG9Bg==","shasum":"d8f4d4d7c4d49051bb9813fc1e6b5dcd96cc78c0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.ea2a8063.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWaPCRA9TVsSAnZWagAAw5QP/jCDuWm3CZ/d/j98oQUZ\nywCjROZpiuRqDgtaxl4P0VFW+BPPK9uO0EKXVOB+YOvqRJEMlnkUp3Gtf/TD\nh+T12Y6egHU1L1aSjMlW4RHbNE2xo062tJJrvB/RbTA8B3siUrBPB42PZEvU\noi9znohoFDk6246Y5HYeUR5CFQzuhQwj1hpe1QihadzZpfyd6mInaYJ9hoWY\nDCaRNedYmf5jXVj/XwgjHFbR1qyqdDzdOcR26B1Tcvk90CIqW9eUZL4GMYpJ\niZashXsvVtMzw34rbHH/DVuj84K/zCyDXZVkxsRFk5xP7FenK5RnjRK8vsP0\nlELAce4Vj9i2zHmJLTEV6smR7JV7OqvNyua9pHcz66x3iDNpjQEkhQ8DsJlQ\nCCvtYfKfDk/r0PDatIPuIwA78ixpaoIE93/2DRb5Ck4Nbmbdkq12/rKWumoR\nlJ4ZFRq4eBTCaBP1ANNIRYKy3S0x+2SD5hXppENw13TzalfKwRrHZig0TLEP\nhzWvCSck2M6vOW88jPXJsharMyhvPQa80bBby0m5pOSMGf4fC1eSgQoIZ1PS\nng3DJDgfgX52W9++kQVfodK44QakQHS5qdCzMPUgbRSkymz80nnWemfQ0fOY\nkmM8BA+RI7UHuJh6xKB/nVJdhhd8XW1i/t/R7MIoDKuv6Z4p4zvc+iofghSd\nyNRv\r\n=8wwX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaM+USZgKq4XT/z7y72kLmhveKwbENbMEqlS7wAWdtzAIhAPGqNn3N4qhhGbsHMh+2nk39RI4wXKGVYCYkjqSoOTEZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.ea2a8063.0_1621976718953_0.4521391532845751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.60cd9178.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/top-app-bar":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.fadab3372.0","@material/elevation":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-A9iMNXKIPtuP4a4NXQV3aJn3mvXGzaW02mLLIygQQjVb5gsTRKQXcYF4qecS1ldXgjvMzci0diAOvd096ZxpKg==","shasum":"a1e09d757b954741023ed26f40836889632c3c00","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.60cd9178.0.tgz","fileCount":16,"unpackedSize":60926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYS1CRA9TVsSAnZWagAA1PMP/j+lYtC33mV01rp94Zt1\nZqwTOS9i1W1XdXephLLX49BBYje6pD58iVNGvaaydkwrA+3avhevBJszGpBX\nuqJxBkVHVll72oxgLN5X7PlohKPS2lNR6wGdPr9/tyutdfZk+taYieZaIiud\nFBZQbCFuxBoZjT/4F1hCiKBd8J6NRzukNkFZQ00hZTsMwWfX3CDdGW2eQfiF\n38pQhUgoMAPM4MDUPf2AdHhPNc8EKOdPp+RwybOZzhjeWDigbSVO6KwT55aY\n3Akoax/riiTu2PqxQ51dhm7WEIUHOYLlRyrBsYb4rTp1D3LW+YTlBwAsbWVl\nGjiOGUgRy7xAiBjjvpcS2a/4l/GsoIEKjA+5lA/6ug1avlrFYrBwEOMmgIHg\nTaMbxE3hijeFVDahCaGdporj4UQM8iO7aird6XCfsTemPVrlct5BfpK5GRYK\nyi3L27zZblwhoG9Ut86NSXqjI6dnnLJQ0xDdftIuL/HDJZYNFaAgHtLsiGUh\nDXpbTTdsaIho/ZAjJ3MGTQinbfBaOL1+JNIYnDu4cQBecoq61DYiiJoq9fKM\n/BRU7ahxa/F6hzr291eQlEv9C+ZBiOqf+aWlfKtpIkX0i1ufpgYS8SCmtD+n\nSbifwGHqiJk0ZHc+Aw6SEJxn9vz9UbnvYDWeFX5JYqApBQS420ZTM0DsGZ9Q\n7vRY\r\n=3/to\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICt63tEpsFXxqDg/mzJSiNsmlOvRZIHrDVBPKP0/cm/RAiEA9ed/5OW6f56eQWdbkyU+6oSwY5CpYfY7yRi2S3WebJ8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.60cd9178.0_1621984436693_0.0660776542360979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/top-app-bar":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.fadab3372.0","@material/elevation":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P3oQ4Op/mvcUe0Lfxm1E4UjTDjhrF2tkoNoAbWZ1ovIFP17LFPVgxRmixK3B84ahoQhRB9rZgz3WfPhJEFCpmQ==","shasum":"4dc78f1cd0351d2833db19a083279b01c52fd648","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.2e2c75f2.0.tgz","fileCount":16,"unpackedSize":60926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZJKCRA9TVsSAnZWagAA/p0P/ixTHA26NhOTaIAOa6DT\nixruFFR6EbbZ4mXtH0R9t8PFguRmM64JZmy3JS+X87E9GD5ZZQCEGxPrWFWI\nzih0tq0mQyUEELAMiY1uJVWJcu1IW888UMjk8GdfB7rYyhzJ67Nn/h4SuKdr\nkmL2Br1Ll75rE1MaP6ZHsLBnd6Wlurjf/rqwc61DnpPcLr4WD1osZIUh/TfT\nxu8gyArL6Dfeqy+UwTytUI+pUSSpHPzjSwbwWiRhYbkz225v4u+psvCOQmlz\nZAYocXdCzHzQ10jIdEhyEoclHL/BhPoOp/hb3U9EsYEQKR03/vnN9ZhlKm2e\nvWxNkDd+4WXG6SNi+FqEeYSHMfUlE3E7axNskuxxa3Eh+/PzHg3zK6iO/9EW\nAjaf2fhJPYyh+QXJAwkN4agqhXEDKUUN69qmz1w0q+6crOvS04XRrpi6saWP\n783dq+SApVadfT1ZbryJ1F4flEYkZvbwlya4F3bab5x5uAAF0gxgEq3eZ1+S\nFIGT8S++lLECpvohSEiGOpdrYRfqiI0SLAYo7RxR3Eg45xFcLLc5G75oFef6\n3Doh1IYm+ToKFip/Uw6b5v+rkfHOsgczWmSRQhwdyZAv9Yxeog5POQb3z0w4\na/bb2/LrjDZD0qfZ9wtp4KiQqUPpwYVAFTNn09/cwZHlFH+FsijvSM0bdX8s\nbGpw\r\n=Cknm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiFQdJgEawx7iZCtyFsQLM7Q7ulq3aeoUFY2drwyTPNQIhAMmMFGoHJSdr7XCeb8RGh/5IB17uDSRO7rQbxM9yl9Wh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.2e2c75f2.0_1621987913868_0.7487287421307893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.b99c77d5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/top-app-bar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec31ae1ed.0","@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/fxqDKpbsVuLBcgwhKVnP3JFQwcRSwZ1qXfL0VzpLtuBw1tc2bikXFqBXTPMslXes5/1cHjfEuPxNMf9wk8Exg==","shasum":"548b87f6753998ddc495d01ba2fc4f77795a415f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.b99c77d5.0.tgz","fileCount":16,"unpackedSize":60926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3MCRA9TVsSAnZWagAAcaAP/0lhbwGVx71t0UjDSNV3\nOoN1OBbrBNI+f3q4PpJMG1/y+MieF0IWLa1xyW64bJRKZ1laG4SkPgDoSpWx\nwPgBChZb9QOud1vAhxdmLd+Lj5BxbXV4YO+DroYP95hbLd1B7Cw0R5qKcXi1\nhzW7E+4w9njpoflhm8YrUZnCYrtfJ6YLZpDrsmzZuEAnKEnFXqf6k5id4paV\n4IGSKhkZA+z+CB9IHBoqdXZAuv0QJ7igssbGmhSTzzrcPukvQJTFTKSMFYt+\nJKIGYVZQ4AwCOqKaT0bdocEuA19SSNXjLGmzRVv5GGxcq6hfiMqISzUzsgYX\nNVYyAfamjiA/AcA90O2yudQbdoU461U30QJ+ER+dLFrbigwmSWM5y9IIJv7R\ng16EU5PlhkqoinDSoo0J2QfMucXUrYeBm8i8GORrf/Y9zuzanC36XoFbHFBi\nOl1wR3F3FI9DSgEoDhgi3eF5kWNub1o5QPRfY4fKHrxGshc6O/NZc6jVYjem\nEm4DGevya90+czt5HzPc4wNnSBjfw9chdzcB+hd4o1boybUFBZaGxIZQQHib\nm+sYNYL4X7RyLhJqWFIS+qMOIhmy383sDCvxhbse4i1i3SSI/0SlFx0ZEqbB\njJbLHORY+/6PgMgZIQz8ZAqAxHq38nkUhPER1nX1rc6wQa2XfHvick8Wdi83\n1vi1\r\n=+5Ts\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERF59ZX7RkH5Ki9anj54n3l1jcBvZpk7oasRu0xWtLPAiEAkCb2KKQQD936LQ3wy9SwoBrrAaTNv0WpLcg8cXe5a50="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.b99c77d5.0_1622056396132_0.40831171372441766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.0de82c12.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/top-app-bar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec31ae1ed.0","@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7BzRsCGiqooIzWjQLh4N5NgVQ0u6UzewOtEVZ/NKCCnA250YTlGNFQgaAz8zN0uGPo6riX5Bo63XRJ9kpzbIUA==","shasum":"ce8c1bae56cbd6beca72c824e84ea5456569a4e9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.0de82c12.0.tgz","fileCount":16,"unpackedSize":60926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4TCRA9TVsSAnZWagAAVAoP/iKQd0O+5yc07umBlbtZ\nt1cmY/G2tFwPQd5f/3xGp607cqOZiXsHQTNqJMYICiqisc6hSy6iUkQLTmW2\nEuP/PrzaIFrPl2stAn0sH31ZQU0cHsAvJJWYCfXWbM8R1gtDlYNwvWX5xB5g\n2FnISHDS7Jw/1Wsf1EIZpALnagVH178zZ3AiyRKeyzsNRBSQgNbAM8Ugaw3T\nN6ynAPKozz062i7MPeyBuCgKON6w0sAPbom428ja2qwS76bBBvvSQDy75tsU\n2vTiNrad+HakOhaYzQ8gUjLZSnM4gKAEuvlhXRWgKbD2pv5W+f84BYxhPNQP\nlaU359mhtG8KsypI+kNWvACF/z4wMPkJAFRz1gXxmU0Rvs94hrnTvq67Lr5O\n+l1r3dTOzMDjuanlZShGmeY8uYWjJC6BR8JKjfjPljgNYzzP1MFfK4RF544c\nLetKmitvJnZzyHOZqnXt39U9wsoYJJhQWOQQ/sNQHwm/OTYoUtJiImYaQHpH\nWToXG++0EeLipzTFdg9//tnqwFtSLcrly41esLbrVaN9Jmz3qEhgvQFk6vUV\nP3SwdgSSL+sW3HMMoBaAVZZkm+81+6L6BEeN+JDf5aWyokzLILsMF4Bq6la1\nNpKznCY7Xr/29WX6qEUJ/Lqn4QX3ugTR1qztZHqW2er1yu4WpBqTSTLrDlpg\nH6df\r\n=R4Kx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAiYP+OwsZeIFAaxtwGfykcM93NBO1iMjo+PsRFoeugUAiEApo4mApqWS+/+1ak9us0nDrXAapsqs7T4Mul8MkBYVzY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.0de82c12.0_1622064658922_0.3242697947413251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.227a4614.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.227a4614.0","@material/top-app-bar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec31ae1ed.0","@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vDTxFEGW1+dL8XMC482T46JRy2bulg9zdRaqoUGNzr7ZbMLVzkNnUWcZ+qhsXGosUf5UrOROM/LetX2LCeSyvg==","shasum":"9127d71f32a6b6bf9102abddb7604284de974f98","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.227a4614.0.tgz","fileCount":16,"unpackedSize":60926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8K7CRA9TVsSAnZWagAArI4P/iaksGJjdUiz9tkUQRyE\nZqK68OFD8z7gFAefjg30rOndfG25XgRQg7fIMnoLTsLoLnfsUWwKfW616Zrl\nKEAIIJ6dZq2DlOuG61C2ZyyNpi7OlS68QgRczL7s+En4R9nuEfPnfO6UTCS1\nL36NtWt8bxClUYrvcyUUc5er5JBXSNqO+Y6rEYHbUmvn88p3v00R3Tcj/K3m\nBC4ilettuVof5Kbax/DvtbzoUbV/AyDb/ZmEAYO0m/YzUe9WXosJ+DS8S779\n/rrFK0IlesHLGDlEdJ+ulb2ZIydKYSmvRJvQN/UDljmmHNLKN5oUpLS6xFpj\n6IF8dmP3/cC19Jj31xZbAoa9Yozcqqx9A14bjPQ1vjay5EqpbymWjJFx7QmL\n4zAuW4XVx1shN7ItKWDwRx01hBldUj8jiAsTzY2THLEAZT/K3GeH95R6oOmC\nBNwXCltiytQMVX5qHsDbxrTzYB9Quhsb/VWdw0CvLCEPUfz3qfuRALDZsU7x\nDOGX/YIdsYLsLmG2EiN0b8mIPy69f2D/fZo7nWu/PtmvCXLUfGAswmvKaHmK\nwCn6g+ZPIz22xpzpAObEBw6LtI0OdYO8pwrGlxD83DeRDWEaDcb4Kk/g5fQu\nkAyFtSig8C8mkG2zjneXhF5z89fQ2NEh+Jofbfu1TwgyGypwyOev1urCSLEX\nKpZK\r\n=gDmd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNkEmQ9vv77w547pDa8f6ZGo6lAzjLYzTPrg7IbQBwiwIhAMniu+xRJgxIMk9u+jM8+B4+FErFN0889vhJTROHOof3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.227a4614.0_1622131386533_0.35990608955699166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.b3d21d31.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/top-app-bar":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.8530d3514.0","@material/elevation":"=12.0.0-canary.8530d3514.0","@material/theme":"=12.0.0-canary.8530d3514.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-39hUgZ+j6AturQDuIXtbqWypRtH9sQ2uoe4ReuOLY3LXwMh9lKmPyhLGgdo2EJq4LIA9UpNc7eDoOMoUMd0L6w==","shasum":"0a269a3adec44689481e21130bb694c2b85b4c02","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.b3d21d31.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+i1CRA9TVsSAnZWagAAqNYP/2knHPRBIPVi2hHcoLFJ\nadWqm+smH3Y+jThVBersgbpFLvmaSJwDkJde09eaiFiB/P8BJNvuZFPgOTMx\nKxQMYp+iqezjU8AlnV9GG9CCmVySWycoP0WD45aRSRYx+dzYVkB0G6Atjhfa\np79YGFgtoamPrgcuHsrMKjUYdSbhyU5ip/frNttix53jRDe+dsni0wLVvf3q\n3QyLL9ZZWSwYF260VR0bytvUTTeUr1snkF1OiPZQqrebeKqvcg/mNQx6l6mT\ngo2SAPa0Ouw6a5cpz0h0dkzz0esxnIdG1TtAyaFMv4e6GBYz4UmRaMKbdX2y\npL7OOYDrkvx2ASBcTDPKyuNUJyXAW8eLUXhPv4ykmAU9ZNaI3FOyj6Rp6zh+\nU4rpaAkjNpN/WrWsewRCQcD5Mp4OdHHus7gqFH8epkTTR3E/LEylOudszlIm\nadB+XzvNyBUoTqEzsM1LIAWqGxlorxzAx4IRAhdfbR1lELHedzwBYJon88z9\nvV4nv87s+Q+swb2rAEbcHqool7sXTlT/CTY+pVnblCZnvxItHIR2oJhfVN/o\nsge0klglequo1/xLsucjzYf56+MzavIJ5+imgFS6p8rZmbWmDL44pxT42ZB/\nfyEqLnD1E8LnMMPVqTT4FmxZpZl3QgexUnqOj5ic/UL0iGunp9HABLJfIOI4\n3O/e\r\n=UAEb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDyRBuiK5JmPAq1l5npYkDQOq4xxQvxOlX/QWPo0zMGrAiEAjtgaaXRJw+eMHZmfAw0hzMtihQ8vnyNAHsQ0Mfv4/54="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.b3d21d31.0_1622141108965_0.9706825100913563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.288c33ec.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/top-app-bar":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.00b5899dc.0","@material/elevation":"=12.0.0-canary.00b5899dc.0","@material/theme":"=12.0.0-canary.00b5899dc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gFZnOhUrc4tEsCCFb9GdynBPalJOrZDy70KW7+QQBo4KtGzYXJ2j8slR4dAwwTvRJx3dC7sMFthNcIxKFm8hmw==","shasum":"dfdb39511867026b9ad807676eda1d4c90059663","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.288c33ec.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9zqCRA9TVsSAnZWagAAeacQAJfcfOBDYtGZjPq63nFl\nGTgROzJiCwz+QTxJRBw9EIweAX+K4BRWlbXECT0bHeAxmd9YR5mFSLmMsNgA\njmo3GSFf/iotWEKDc0qJBi13MkJwOFWoMe6oOv2xMh7DLbRsHwTVLS2mPwUB\nXqDk6tA+SN0C0EgqRCe38JsJcmaIzY72qK1g8dmyvdd+caKYt1BSet6NWuNO\nQTx9tKmxYPmRaC2IsoGE9xrM2x9Sz/kgH2veJX0rv+6iA0oe6VYfqp1iBuBa\nxmrO8ALvetAp5U+YWh8E90n58yJYwoH7FL5oS5C/P6npMTwG8fxmMRFy5UM2\njNej6n0AQx5EqHTYO+gKtmb8gzT77XXFxboYWsHN85FhggaCdXZhOrPzUmW9\nNuC3gW5xy5Xq/P0FyIm/RHCdSnVeEBXhNdWBzJgMkuS1Nyog98bJWZXLlfN/\nRfjQlvOXvlaOH6QBuBYdZyCJw9y/MUzG86H/mOlXisGEtq6a1tqpq3qiAUga\n7yS6ft1Xa884xJYWCKvno5FxbEYWSZz6P8oZErXeXTE4LL+LXT+tNtKyXfPk\ndjP+WMDAV6HAsYOMqcOOgGWTw3283poP+SOvcL0/FSC12F4Tc6OIvd+TXUWv\n5Sm/Bo24AQ/xiNcXrN3OMgAqQsSEj1NVUYG/1Czon8sRXXWc39mXh6440WaN\nL3jS\r\n=BiTM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDSEh6hzUhsOTQEyFlXNp1o1stjXiZAdGuwFf2X6I5DAIhAJOFdUBYis4A2sOfJ0VeFKAZQbNkKTcFG06V0EFWmjpZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.288c33ec.0_1622662378232_0.8417740277810528"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/top-app-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v34W/BBDktVIIjhVjD/HBFkVRHT8rB0sw894UgVF471WocSviwQgRpUyoUH9nATwxM9S0J6xqPXVPW9WoddA9w==","shasum":"00b0110ff4633da7c20104b0ef0f6d8ebcd5d465","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOQCRA9TVsSAnZWagAAOwoQAIwh7lzbsAam/3gfCC+u\n7Bt2gNJnbarxV8SuNDN9vjeJdF9r24dQCqxR6Go8aRLNt97KhDPOTDMx8Xmj\nlR/MjP5cinekgzNRKTJeZvqy30zDgEnIsJkfNnp4hqU90AYP3SdBKktNbfwA\nfTGZMBqCWi7vkh4LbCSOj2TBWN4SqHqKJCWxt6YdMAm4G+Er/NFGiJG+F21r\nHX3FUwdVuotELvqKqgkkhkQqp2fcLaxfyXNkfaBjitBVAGUbwP3CeXek4+zH\nGSIZX26ydFvKxyWpQns8IpUUWrD1Ope2zZ9DO9ZYNeykcJwu4iLnEGEegsxG\n+d83zF9nEgJl/laNWZif1bF8hmW/Zycbt4LzoFd/fxud/cSMn7QNAs3JBdsc\nEqlTAYoBOs84U4sOIctf0FVMKYDNUCP6yeTQ+kc0z5RxpHQnZzaPGcBGFSkt\nTo9DMvtT/paQsrVDC0+6cKwVTjZlPdaiYScA6uHQy0fIyRm/R2aEPiiF3BAI\ny/wOrVu8XQRkD0d6neloFxAAdnjm1JF4z3Q0AIGe+3XJ1QwzBzsFCpfIAtkG\nvXsXrptNe34rwjlqt+HvxFegS7sHzw/M/61F8nrKk1RkVkMC9l5w5zfrU3nx\nk+GacRDsEmk3OrWZ/iDLAQUxzkawwGn+1LXwbXlESRiw8yli1XdqJ8lSGNsS\nrqoQ\r\n=GfM5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLtK+JPbYQMUfoVxBQMBXtvgx0T8OkbwHtHIflwe06wAIhAJ62j1QOwR/L5HnGgA6wPTfUlCSGAU1nPRtQlavx1Bfu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.7eb7ccb0.0_1622750096294_0.6884904883673681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.7fcc0726.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/top-app-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7kJ+g69qvG4Bcy/btzFQVgdHbIoCWp25TWSM2mPhiTh7GL1rPQQfHqP8vcBY6IybB17PiizK8MbaeuTTcYm6zw==","shasum":"6f47da80de622ca2845bd0b9c2baa7f6adfd186c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.7fcc0726.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2iCRA9TVsSAnZWagAAJn4P/2/SnDY69lr5P64gyC1c\nqpCNutjhOh525sgUVcfHVw4hb2mVITyeDwgjq64KP62mRO7s8UILN3YM71Ap\nHSuRlj51COMAno1uaKwZwuAGRvEitxh3LhFZgvicoUn472Btsly7BV3fKW+E\nHrazLz2SS1KQP7G0lKAwG4OxWoVk/LmwBNnqTFgYZA6RsDSYFyMUz2vPgUld\nmIaQmlqX4JFJCvQIHLXeEKaLbYN4rKiU3f/Hw5HNfGJP4LnhgerZfprnLU0F\nOou28auDTbTXW6v5Gg0ql30N+UHjpLrkV4tmLmgfz0CTk4zWbtdkykQcdlWt\nEUaH3xAS6sQCjKWtHtmZJwpn/QXLo6TXSUokbiQ3VJMiPl4x6rAnFoe9xQGM\njucv10J++xQ+52rAJuRq5HaF+saI+0OP6OGfggZL1FZ04ktSPBmZs0Wn1RF1\nUiYD9OzPFYokDwABylWhPm4YcAeW4FYlQy8/BV6mvgXUwVXdb53Dv+ae8cO4\n2WKh2tqgMtHaU8KsbV9AstKKkUedkt2pgPAn7IF9GnR2bH4oZ54k1YFrnkuK\nGwrGHmYb81wi8hDxwlRKv5hjgwOdhQYBIdh7WVPUsGWrewp660YmYRH6Wnie\nOeMVA2Rs4PNmkew39xHgWoYkRGFDm34Qx755y72h2CbT5HQbllsPnurKy+fL\ncoqJ\r\n=/a0W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVgmM3BYFzs65TL52BkaafbKsZid1FN6YeUX5hzHn9jAiB8BMbHjbiT5IzTe4b/w49LD5QznJ5+WjG2tdN+pIgE8A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.7fcc0726.0_1623113122720_0.8226287730435711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.220a4e5e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/top-app-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W5DzqglewAgKBZDHxh1McfnPYqvHP6eMe2WAPQJMOkdUTJ7Qmzs2jCX8IFKdbuwH4sQT/Z2PqFcKTWQEqQLIxQ==","shasum":"70cb995d6faea54ce871ca0d68608f25727a60b9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.220a4e5e.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63KCRA9TVsSAnZWagAAdAgP/RkXfZk8X1jUC86foxEc\nw5Hh6PUqYelQ9kMwGmubQ9a+ewtUCLs+WR98/hkJymgUqYFegC6BCPn6alnE\nu7FFFkrxs40gdLx50Bbg6vDMJ0KaekG8gU0mr5dyZnxsuNx53eXJvg3TlL38\nRRsHgdiecEvdMDNgXAHsyrlbpH4WNOkkObBE1ScnEYnsDRrWE17SLYt7hrqK\neFYgAK+vsda2Xdtlgeux2SvQsHN0W2mIDg+qxqEmFue0fng6WW7Ep3kBZQTH\nrF9DxQN63JflbCSTRvqq700pj7tKduWvnsGezuLVXB7yGlggZe2zrMkaLs2o\naFZd0YDAYbnsEya0mlyHi5xBm97JL9GAV9dm3L4KyBBeFEc2MuI8a/J8oVH0\nfw1xWKvt2DNf8Jnh618H9acRHkSoGmrZESlysBi9B+v9FvkrZEgioPDUCxic\nrNRNhNuXOLu4eoouQW7Xohj3GZ87/FErxkJuIdm5UoUMTlyf3CK//UnDCvBj\nm4tRsWhJ9SoN3JRSqBQgrFtkGkEEOExzX49oUyHdA8EFfaYIDkAE514suHA4\nclzIwZoYFLIMqgf1yGrcYSO+O43/PwUeI/sVrfzOYIsqkDKPY729Cry+bAfG\n5ZYfJvdQGNXmj3XKuUduB2toW04yOpMULYCL9M1oS2u34uFaP2yXY2QBQh4H\nJ3kL\r\n=bBsi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwMs1yRg6pkA6s4kiBJ97ig1WLxR7YBM85O/t/gO8cRAiEApBA4Tl5Bhg/yPuPoBpTeUDXsVCRQ8YgXmy2bJfrPZiY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.220a4e5e.0_1623174602099_0.3622425328203942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/top-app-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v1NELd1QO54M7zf6V7umcCv+EygQWUFOCAy9EeeYXtwvheOxZ2F/wkAOPzc5Unh8/HOfO+ouD3vnqAK+QgkpNg==","shasum":"223f15e3798c6b55428d55c9a83ecb5ac3b55093","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7ivCRA9TVsSAnZWagAATbEP/1sbX/dPwUxoE2V2yjYI\nhJhonzNPQtINXtJ9X6ddaUlcqxXpIlNVpcWa+8hSYxiCS5NKOk7h1z8VsiwE\nP+ZvvnnQxwEOYzQ7k/HYR+uNIGavW5kpBg8yUQ6AGSKlZo7VL8C92vUa5a/D\nMry7nUjgSFWqYJ8KULtH7FGzXYG/zWgdZf5ex50bkBYlanN3FRKwbkYpAyfn\neufJyShR/Ctofxf1zGg5mgKpD0is05kCt+kzkKLwc4QosHscnEJn6ypmgMkQ\ngpjDVDXQA7q1jfDwjl/is76Jq3DnKqNE4oOygdaJ+n5Rkk1iL0hpUJICGxwE\nAeHoRcLG1gCjmUtuTJFbtM8WxWti7LQUksZQ02OHnqYEbhqo2qVQc/MMgY7d\nC0/9DvIMV4cavPJu8HJPc1by4rHxsNausmb+O03o/Kj5D0xnn5uodNrfCSbD\nXGPbGG7LA0lpRnKwC0P00i7oVTykGjZCaZmtiyySuv+nyiH6LwWAAozxss8h\nAvaexgoDTyll7Ju6NuIwMmEuLrB3JmjQYFXkf8lo7+eoA46zzsjQfGEsnHJr\ng5oDjcY+XX8q/18824BU1h6yYOy2dZ2vdA2m2UTGMG5Cil9tnaKBnA9E/kWU\nam/p2KPY85ktmDZbj2y8DFJ3WLqM78Aoj5SOBAx49mT5NdX1M5JG0MVj9Ni7\nLi/H\r\n=84Qn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxSs5Rx8d9Of1dcrTPenEp0D5uPhQMvQv4JE9SlPDJpAiBmaItEeE+r82yGdPh+1lzMTLJgOd/4IrcWIFeNNi6tRg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.6b2d6ab0.0_1623177390900_0.09066066834324937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.2b20825e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/top-app-bar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.8415ae585.0","@material/elevation":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DwDjjxArULAgAf9FgEd3MlmFYIHBGIZkSzlJOMGx8WXz65X+yskPro7beEhm+U3wfV5f//xGSdnsZnshv0K5YQ==","shasum":"0ac8b6cceea17b42bca55bd663f53f46f347de7e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.2b20825e.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZoCRA9TVsSAnZWagAAatwQAIdQvvGvhe7EwpP8TD4A\nHHIj7bMZ3OV5uQr7hq8+hqEa/VrgfOuqNYyB2867i2Wk7mHQiFvrN8eGKz28\neQIJd55mnJg5AilizMxRp3sKUFwMwI0a+M2nNmsVedn9I/543jFkocuTubG6\nwnfW6bIzynScjOOPEkBs4rpMBFhVR4hj3JhdFkNdwDjGFWTF85YBVSm3HdvJ\nnZj3DGseax4L0FJWYj84KYo21ISZa7DPVKqTTDB8RqlMH063by0qjc5KjLtl\nD/jLQ9FtDpsz5gDoRLlRNzBzvlBFDcibgimvlEN357JptsF6ZTEM8wfwpbqZ\nnyeLGJe9IxdcFX6HN/OT++VQ2UhtQJnZotHQba/c5NvW1ypJo6jWsupMonV3\ny7s821t/M0bl6gXa5BZqgdLA8STTzuC2V7EZKktI36jyIxzlMw52ewZmcqiO\noh2CMnu53hLAY5yLXFyh5bF5FVTJlSNkGnLPK1DdLP37oI3QRIxXbFINvU+w\nluBLsVhHh1w/bfrPFFRagQaFcP0YDzgUrCUHycp+p+9VHbrKSqPZwGZCZhp/\n+ebNqQV2ytXNmqLQtJ8Zp+zVwnI81qzN5mL1MKZ8SmW0XrwmgdV0rxX8Mjvv\nm+0qrB+ikYlY9jXwb0K1OzJ+L9ygYB9H9TIDlrZ453nqP3g67nGLDiqYbor5\n55xx\r\n=l7Lv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZtl7jhWAv9b1TKiDPpRiut9RWHRj8z2g1/fSTn2QOdgIhAMdpEeM9FxGinjVwrhcXmKtmzcC2IQlTz6LPKrvXFU34"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.2b20825e.0_1623455336262_0.6256159867333764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.e1511867.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e1511867.0","@material/top-app-bar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.8415ae585.0","@material/elevation":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uwQGLhmdssr3qRg/Y2jkiXFQXrGHKvJQ52qySN0irxssFzW1VA1QfGdqirszOvfrQlbhadkhNhCylu7L/efDCg==","shasum":"9eacb4382361f5c74f79e2488ccc3ff42b74eca3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.e1511867.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZoCRA9TVsSAnZWagAAyJwP/R6dqu30w5aKNFpqJbo8\nrJWBonu7PX7zxKcSnlxWXq/07OnqUHykognQzXBsM0pB1+uPh3wTUPaCYCR8\n8a5AXE6ah4jKXYSFzpWBFTjF05sbozeE2Eu380vbMash8MTg5ycClNGfcyyG\n5MuX6maWHKWLAil08hv2nujigEjnz3e/J9wnCsGrLbnmVXYDu7/rDnVqBFp2\nZYf01y4/rLZyCCWSYdxZNsTcCR/lcxsT05Mv+HN8ra20k2ahULulJoeLgbnQ\n1gbj2IC7tz9dd1535HGUiBXupEYsIB76bPh/6lb3mvcRapqpLFNtpXBsSnCN\nrXCVO3islLXBzJj7XSZJQJbnYPhR76NNwjOaTOYnyTiaUNMIUE2U03E5rbmu\nt+coY3z1IRdLGPeCR+gFrW+wJMdkvkcWF8DOynlASWddTaJkfiiEmwCHzDjh\nJB3kzJ0NTNtrKRJv/nfrPyBddCaUWs+XUdx9PCVvd3/0bkkIyIxI3232Y4EL\nDtwwyuqCO5Awt3OuUOhFbHEulehGq8kdrqig+p88VpEfq+n+Ej52CgDaQU76\nivVljAy+NLw9uJC4SsIPrn8VUbADcIKwWHdrcg9u0Jur3ekvOBOZ/fDfZBM+\nJzXu9hqp0T+2uelC1WRRvczfDMe6Ru+oCtqAgMP2Vg+8QNlyCisM3Qo5vKzA\nDzy/\r\n=8vAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoLD0t4iJ7iImW4GDTV+u9B+Us95872lhTbOBwdhxFtQIhAIE2mObNBqCVSUs/BLcpBYFiXjm29iVdBuFurhiTUmAv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.e1511867.0_1623459432455_0.7375478290484092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/top-app-bar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.8415ae585.0","@material/elevation":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+fLyH7HzzsOxmcX98a8y+E7LJOAKYlK4SrVvTqwu4nL0u4CrotX85KHVm+oxvyK1KW+fFsBwSOnx6kibBXdc+A==","shasum":"e5cb94b77a0fa8bf2048e93e19eba42313930e0b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTRCRA9TVsSAnZWagAA6sYP/1jdKafw//bwpAiPtGTK\ngAcZyI+Kcx+0oa+61sVcmrLEAnlCFdG2NIQFIYiXmUT+Td7I5li4bo0jELlD\nACcmx8iAXNIgoagt7VrZ19BiY1i5/mri0Ru2tPGsWdDU455blpMXpivcUFnP\nr6qUipQRdZIHBCavVewOSAlMs1PXCGmfbK5e6AMQJMFSg+r8RbEnNpV13PZd\n8ChPUdrdmDwj4KxuROTtMxZCJfEgE5cQeDq7r/jCTiVb/1QuzvEk2znbzWOv\nd+RX24aJWwjOuocS9LbSSLVldTx7HlMjHw1NylG4es7pKwyvdr3zybA+haMB\n+uiQDwn3b2I7Sn79fuVZ2ANXN9r+HEkMNbjLn5+7aXEjDd5IcPqTqZYbFsSs\nzEKNa1xFiAii0mJzZKDU9Pn6veanbHNXRVoLyQHNxbtcAJ0M5zBBrSZIESfu\ny4zzW9GlNaGewRzLvvsGuj2fkbOB2d5DagZvZOu1ZJ2asN/+ifCWK8LdMFt6\nqcrfygWriAQlL1b0UK6nqrHrQ1ZjD7D1mDnYA//EFsyDmp26i1fJFr2wLWAM\nkbLwxRdRkqqoGfYh2aiWcQ5VBrfHB9/JM62QxI3zAQg0R0Nh5bn0HJroGc4a\nWvUVQ89xGNV667SWGu7I9P2MIfBXasvUM24SU2oKOAH0/aiueNKEFwz5eRns\nzoKt\r\n=WzwW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGiYbU6RC/ml+bsMxgnHmkxIN4sxKeljaqodLAYH/IZFAiEAkPml+dDDMwnx+4RA/2voIPz7SXdd9lX4WZK8SPJaVV8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.ef4a0c0d.0_1623786705280_0.2977073603444771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.573d8913.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.573d8913.0","@material/top-app-bar":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.f705e8048.0","@material/elevation":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wqVR8+Tk3dKQapf+evWuw0SahgEZDbCYjcxMh/+q6DRBjf5GlQXJ1ylaR14UzU+j6mpwYbn8FgCC1J1GLACfCA==","shasum":"bdfe7f55cd43e03ffbf62251d36e827a7ec5caa1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.573d8913.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSurCRA9TVsSAnZWagAACF8P/itadcUjCUAzqopuVV6y\nJ4WVUAFcvBJZ9tBzFWlaBv9g8MJoStQWSBQcJafK+naHja57o6SPTmrT/coo\nskyEA32b/N84KsMmUWTpbW87gJRP4t7jVkR8I4r6bKVcECMEtxEJZnT5aKow\nRIVb8vheh98hJAgL+NN9fqloZCCKhLUVq2LByk3YjcEh+31z0wUbjE9y8CJ6\n/45P3ZXgz3NfBpYz9aNsrhmdKsFN/At6OVvT0p68IIqC+6o4rcNycRvq2LEl\nBuTPfhvaHWiIOQb0tOB6YcvTlDtfCocP0FHbdn6/lQrhS/BNAvsmDDDC8QEv\nsN0gLYjeSM/FKWkdLtaPkX6Gx/O3pqexEchutnQckuL38io9Z/MQ0RrTSsCx\nIoBB0yqDTvehFRUcg1vBvU/u8QFedgZ4F0ymZC6f9Ey0HKGoCiAhLneAb+D+\nPk2IPKi+Av+0Lgl184K8A9LwaUvmmpr6RP3nKMJZ0X2iV5i0i8NiS84BGZT6\n00rSQofcsAm14UrxT/7wAYrtes5Dc7O8fwte/peV8F3tvoQja9XfwUqXgdij\nDQJHSw+Vup5wxvxctsbLqVYNMrzbuarXrKQS3nLQDVtoYiwutmrNFE5OAip6\nWwhYvx6TfSNMeE5RbFPYOaWE9wyjqgyAjqQVr1ZBqV5G+aVIezSyu9XwwDen\n4+1U\r\n=Q6Zl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9d/OxXGEVVPzaBAzfjrG89jfYqfjiguuyWZ0/qK6lLAiEA5E4isWVA+kG36TFtfZ+eC0saMZgpnrXf7L/06NxsudA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.573d8913.0_1624058795008_0.5742419563792753"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.21dba001.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.21dba001.0","@material/top-app-bar":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.f705e8048.0","@material/elevation":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dLfUfJKN3tRUbtMCOiRvbPg2D2bGJk4vAfz5RrTDI4g+MqOV8X5uVA1Sk74oZktvhkEvSk6/YgmqxCV2Wsf0nQ==","shasum":"c5d4487f2dc00073dfc5f36522695e1ffba82aa6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.21dba001.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdJCRA9TVsSAnZWagAA3LYP/AmTgTpTF4u8iwgY+Sba\nY3Bh4D+ZVPEALxj+KOmeD0WnO2bP6QuITMGGI6Sgq1Rqz80YupXLVJwnfxNg\nH3WrgjLUhQsen5iAtMCs69Lf/3p2v7FQVyRiJztl6kpn+0CIw6Wr644MborH\new1OpUZDRaPophBBzYk3m5HFhXuEh0SQT5VVfNlIo81dZgmPo2YLrmm6/Qgo\nEsztZdGYTqJR4Q9TY25xZ741/lfdlUynG69n3hkwJ4W5mBZBqZfY7gqCTgdo\nc435Rb8x/t57+X/mjWRyUsVkhx68TfX/DEx4iBeR8pjajvYWGjUKBSTreXX8\n8H4T0p9BQWDH29YaJenYX0vd+Rkes11LfnjCjUnQwMX+vEreU0zcX05jCPgC\n/0wg1eSVQOaX4oLd7NenREhDXogMP/kAXZ+IVRscRtwf1ccQiJpcdWj30g+l\nFto3eIinG+b5Mp0iFhvRpzkegB3v+CabRtPCy8wqNbVRiaWL01EITk6B6IAx\nsKeRXjsxl0H93uRIFRMyv3TgPfezl728L+bR3EVzXPlav08MTvwko/ndfg88\nGK8tvP2JNMYidv+j9kqA3gDdn8xS6hz3Pvm2bD+jZVxKQtda739DfhsRy+XW\nmW/7svsACP2cC/e8fYQwx9mLHtISk6lg873HP/MXoY5yxrtJmPzZpWZKcv9G\nqZoZ\r\n=VxxI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/8id1lrQDgduV5Vxgr4zbM+vVirE6FD0BNxTz67uzUAiEAx+u89vD7yTmp3F5yueWuEiknze+Xv+Qv/6s5KvCgZaE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.21dba001.0_1624311625368_0.8016792438707012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/top-app-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-doYNhVlnIDOOh8meovZzQAIV+yXkRoGKqkFAD5XUFWaPyxL9lgeMu1TjjjhspjIBEN9qBX0INEXdfo3fcEDt3g==","shasum":"e14176df459d3cc11ab69ad5c09b593dc6a9888b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q18CRA9TVsSAnZWagAAf98P/3aRslXR2h9LV3fd9zN4\nHAR28FstummysYpiy9Z27TgrrM5LXeriQnQRMXyrmE1vYC+TSsRdy271Bczo\njY2fq3jiKY0WlrtlKir27b0848JR17yN3LpIEF2NNUtx57aII0JKsamywJS7\nnhMNhpgrcjAjqcraQlcjI81lEWj+R1kDGhok/tkdZC2e7lBABd7qR1Ecw21j\nRX1YgwcEIzulF5xSjkYsz5Q8OOK/q6Wp10/1B+8V5bmP7faOZJE4L+wJqkh4\nOzbapszKLgfhEJF6Gh5pcvFKG6bTdiizWLiaUev6aHdp8lykv7BuZYOz7aZr\nXiFMVnJ24pGpuudfhZD7XX7ebj6AAhvjMPgZpoOQqPE6jPDpW2VDIEwyG8SU\nppOF7sFuoCv3oTO03C15k6WyFqqrxmYr9SdbEzxWTtQx6U0I1b8UIYctjtIu\nzROGiG02TKqJ9PaB2ql9GSUI0V0/e7qWGUYZsjdpaWF1cf0gXrNzBNfIKjHb\nuy+ofJ6CQWhCXeN7GC+DYo8UcMsrQpzA8jgVaiAClVGILmVRMsde90YqjJIr\nVG/AMJl+jTWgGxmtBbsG2SC3g08BqTK9Yncedzu2gATyuQpGieouaOMxy01h\nWQLKpnCa3bnrnQHT42JKwPY3ppVh40EdDgw/xoOtxtwrawm1R5j3zrEBTSrT\ncfVp\r\n=4OVU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLFAGCJlv9a8ywqwDUlaG/3Wr/9bnVl+Pls3Yq5fecPAiAu5qaU4z8KdlYpn3zqUNZgvrOpeQFhvMcOK1IC5smEFA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.6f5bfd0f.0_1624575356193_0.46252415943705105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.fd8360b4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/top-app-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-in0GpCAcv/EITwNmHw0Ah3ELM1mWWCfEZSJ/3uj5lAaFCsY146LGaNKDRWl9JF3bhVbMN7/yJnp+qo3f1bLfwg==","shasum":"aac8ae1b7cf294fc8b776a9f5a74b7217348e174","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.fd8360b4.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inJCRA9TVsSAnZWagAALOQP/1A0W7+KDk/xHufi9g5x\nyi93m77q+NYWYNVhFSaF4qVosDf082xf2RWIenGKlEiBXzDaEXnF/CLnaaoc\nlS9W6haHzO30XznIjP67gq2EZsSOKSQUsMs+ZmAxHfnfUxkn9IVwJ9+ZSuIj\nCecXIVX8nJ2PDUNVJyLTxnx7GCGs5wa6NJOBtMal3U/+ws+PkezH9bqhCZDv\n/M4F5LDbkNZ+Jw1ahOhqtino01nf6SU37mcygfmuIDm+VQePCWCWqOQ/Mk+E\n6zhy9Eg+HrXxV706M+kvjC9Vy/vkYwdjNHpwGCU1ZVIy67LZeF46ROF57Tgi\nbueYbXBRHgueeOFTIIw4uk9rn58v5HJa0AfZr1jrmCIegEhx6vB2adL6m56I\nXn03fbjJrjjzJ4A+RQF4Xc6XZrVeZbpGBcExxjraUH1A7BK4xGpF95zh6Jvl\nfPztOe0TKfn/nbuMercpXI88eEppsvOfDqTEotfko114dJcsoOEaXQCsPrQw\njlUzlzvPkdYV/fXe+pCE9k1Ykj8L7/zzcNgWiSYiPG5thxLrmomooCik0AFw\nXMh9P6O6IL6SKZ/dZexILn/7LvD1T5FqJe4bbaLwSXvf79Yz4ZRhp0VyozxP\njEqN0faeiCzRaJkJRAzeusTioXvBF5/C2vJY0/AqOC+UFaqW/yUeyFcgIb8t\nX3s0\r\n=ckBT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCU5D8GR52sYB7XK9SkOqBufGCRZpvlxEPRQEmvTEVcQQIgPppgs0svtW/VWQW2avGKH1AY0flEYn93HpnV2MA6PMw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.fd8360b4.0_1624648137132_0.11072745075599877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.6f74432f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/top-app-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dfxwYef7N7a7kfF7Jv0QO0HKpRoeVxxRS0H+vMjSUvNR97vFMk04TwtAvxriAHVXro9nIJzigq9q0URi0X0FrA==","shasum":"207cd74f699bcdd8b667ee1dc8fdd07664da173f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.6f74432f.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kC8CRA9TVsSAnZWagAAcSAP/38vrYhdN6goKXZIfoeG\nzWgZic0WRTcGwbsZOlZDNHbeU8eD1yBjq5CINkJCj/tqKbKAiVgxcAIYcrSL\n3giGMIIkvqdOWzBM4qSI1y1F8FuqxW3xX5424+vHDqr3k+eytYa6qXiE/5pz\nIvZYIS/4KI8XJFLVCtlD+uisIuerJkq9oA6j5sAI3cHP9K6PAWTLtaFRd9oF\nTThJiKqWc2fRfEFg/jSp6Sj9Mwht2K8EahoCqpTYLY6nEqyYAK1o3lxcQyTg\na+hsiepco0oqHox0+1mFi3KmyvZond6+As1i4e7zMt5dCnqr/NIIIkiD6DqR\nIgYRuW5FFCuzIVNjfv7zFcIz4iR+I7EdxObItwFvyD0nE6j+D3GuDqGhGHFS\nNAUl8ENPbFqjBElnRX0mk56rCSlMltXPA7Cjf+9hNGNpuwrQz4HNVz/Ng3Cm\neUniuT5Ioy+Pi9jxnTuVC/4O7cJaQepfMoRZJQZ3/SyRPzCAeucijgm2iUIS\nx4EwN/kmeVx4m6D88lPP5GIdyQuVoS4v6HoayZzsCaI4oFI59vlZ+lgwa7NG\n2POQPKRgroQEQequjlW/JMRQOCk/SWit9YT+peSQvcX/8dJqZa4iPLBGoYuV\n757akN3vzXq/sS5UURzSr/oHwZhijJChzawiipPyEbtL2Yo2LNHj/5mtODNe\nvVLE\r\n=MqxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDHqHs7f4HLD0OXx1xQwE1yoLEu8teDZMtFeZ7IeWznAiEA1C8BtgQvbEsT+o7My2o2RuC9AJpcIiRDxnez9cmULhA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.6f74432f.0_1624654011748_0.9182716799792265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.b62f901d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/top-app-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dPXrSchmQTYWPnXvteuRU53xcF5JxQA2MWB3YKLsp1KsTbkBzCHuf8pn8jpTU1IBrZKP8Bof3SeXRNkqzvMH5A==","shasum":"1a19bc0979768881a649f2819acb5312f2622318","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.b62f901d.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXiCRA9TVsSAnZWagAAGe4P/jcENJqY80mIOu86n+3j\nyCFZiGQoFmo3iMTylQjAF5gy7pWgwULgelaFHb6UIhY4ZIWuxky09lOkLoU8\nyt+HfBacjIACGscxOGNIMdhN0zh2NoDCHEim59pbwzfDc0OPIh42m3MVqEew\ncgfhEbK95bPSOq9LFNO0bxOU1XBOVBhUH7vD+y7j1hq2UO4x9Uf8jNa69nEF\n6nL8fX8YTI3uD8HbOP04TWegxCyEg56aI2iFa6uwaLdGVNhaKKKpgrdqdivB\nIpPNBaLYT6poMNqcu/XZOBNVAr63E95/k8WjloIwiOn1sTrgN9YFJejJOUO6\nGecdpLOwO/flO6xI6S4dX2l1OrYqP8ThAJIORhDTY+s6PLigKXFmtviGVduY\nYiYSfJ5vLS8eLYPDs019jRdZs51AgK/OqoCCX4ADYlAmjFhH1+JWONcyGUw+\n5Kjz7hZSnHqOc8iSKHtmMJFaHOx5dveaYwuA957kTen2X3HbN01myNmeyxuB\n7JfV/FxAXGwqllWma4nRJVL4ndWz7EGZzCT9ZrjabiDLHzug6mmBwJya53bQ\nxFB6/ZVw9M9Zy/szN/4mbOFDLxGv/yNAA0xrDfJKutciLV348X6FjFfC25KQ\nLGVwIyOq66AiDPsW1f82QAOXLeT1/7J7Qix7SKaUwq1u0m+umSd7WW3rTiTh\nvaM3\r\n=IwGM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEJI9DGF9bWCFn/6CnweB61zItSpdbdLilYL8TLinbSgIhAJPENd1OCx9mDoh8eo/eP3O1gJ9xClvIL8LET7ue3Lmj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.b62f901d.0_1624659426263_0.4797166870902714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.73122cba.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.73122cba.0","@material/top-app-bar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4c80072fd.0","@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1eJ4eAVAG1ljNhh6xuaY+fltIK60tsV39LD0OaD8WtiKDfu230fWslgELLp24/DYFfolHlfZEXeqbwMJ5YsfNA==","shasum":"ae7d2f7c0484dd5b17afa2919e280d799f668c77","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.73122cba.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfACRA9TVsSAnZWagAAuTwP/21RvrwqPtT/+6hl8NDz\n0S5ECTE8Vo4j+/f5fsyUdX8cuatQUvCUFvpG8kjbxZoIgxvRE/0nC7AemQEF\nu78ZL6YVHo31gQFNDeyOkZV0vOrPPsDSMac4Dx4o27NOoeJj6SbVuQOHlHjt\nF7EmMwkhHz3sXOtHBw+b5eAzWAzf5nNzg+8Qsj/ruw7l1u6VtG2Le4ne7eXO\noVtbEQ5xCZg0wsr0IdoXyehAo0RR0fdHPw2g6U089juKbGAty+ItU0vwV/Lm\nMYVKR+xmqXUOH7/ax+fArOc44muCcfGHfs3g3XbawtH63BtXBX9U91FLbhTM\ngnblCcoZYngoG6oe3fJv4TWYMqM+QkJLbhtSLFh/OWNLnA29T70yR8DTG+Su\nFH3cgHgkhMtAXLAnc7IuFZ+Zb67q8qukx3DNmbltATXZL4Y2MsbVmaBwY3+V\nxYtHNru6j9/i0BFhpNAke0tCa0EG0+s7bX3tUlydiKaCKkeGa+ZLJNRn/fsT\nelQkrge+LdbL9KvzcM3iJRivK1rp/dC18IGGgUfyMGSFq8K/nR9HXrJVpSJO\nJIl64/xEhWkn/AtGNM1nGQziD8F7aJ/f8xaeVwIjrME1TBwEzRzPvLNkK00O\nir8T8Yo2IuaZrNvBXhWorzr+js9psX6UUaA8DoEHsc/o5zDHj0J7ZrXHWgN8\nw85K\r\n=zEkC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfqbKubhE1kC6+DRUJxsz3D3bah2KLZatViShZU7I0ZAiADdPQuf9IrOFQd1jhmqUYz70FMeSjgKvWBzcpMcg+a+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-top-app-bar_0.22.0-canary.73122cba.0_1625081791566_0.5715993438812628"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.a6912af5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/top-app-bar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4c80072fd.0","@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LssNJ29BaHZG1q1TdW8zG1pMBnZpXf2YvumWdgYQSls0AtoiUAPQcD8w5MxuzrW4HFNzqzhOy6bi2jkkCuDnLw==","shasum":"826c3be9f28eb3f19c2d27000ac886d26542d94d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.a6912af5.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTBCRA9TVsSAnZWagAAO8MP/00QGPSmGTVHE8zdTgos\nFVBUGjjh1zQvnbnNqHuAXvzFk68GINZ+B9rA2RdgmftFkkzqKIdm6i8246yu\neCMILALNZTtOtK4tzjWBwImPTAzpdYcLAcapIVnWtJSue4bs0vPu2iZl60sx\nxSS+PEeudRkKO1qi8VjMHpyQ6YwEGeWjo40m1r2kqM3R5SGqsec1cDWsyCzi\neIOeGtg/KAjS7h+pUq8CeYTvx+sz1lhlPXSmkes8r4wMJmuV5aZ40XZGiIQg\nkBy+ct1L2pDT/4ahef5ww/MzJ6SvNFsZysop0+VO6siaY06JOWo/+3pUiwXB\nLiT5/88wYuIMSQ1lKVepyPiTyNt8GWWameWIgYX/+pVYjso4KWzhuADqRwDW\nKitguEJtwJM0CuuvLOWYisnNC2C6Bebl24LA3VHh/EWJrRKMDL8YoWaXBAFo\nMoI8ti3MwyIBjSPNiq69MTfIDMA0CjoK5q3ozGpxp2FXKeBi3V+GoJwQdnrO\nw7BdlXdk7X0dTWdqWA1XDmuYSfGoyrtVMbEZLFJUZihYPZOZlZvB/uOM6F3w\ntpH3SqZQSVd/vyCBurDBwNI14gdUT26guQnTTKfnjDzYVlpKGr7pfw3imuMc\nqJKCkVmikZzTUspakct93+Eq8663tl37tCa9YX+AZaKCmVdHO12vnuflNHz3\n2msE\r\n=+N57\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUv+hdtduUIExTOPtvTiVXxp9jhtlo/4g4EGg/M4GoyAiALzG/Y4GLxLlIaVXxXC9o70Z+wis/6JrjeCBbIeZKUTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.a6912af5.0_1625175232548_0.5718583512248818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.134f24bf.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/top-app-bar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4c80072fd.0","@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VrZcjuNkAL+fwVkPf1413Laa9KLAv71ziKJ27dMoyirBvfAlrkDYLeJ4QOawkOyu/lnXUzB6juKCCCRQJ4Pukw==","shasum":"f6be9cb44381315f56387fa85a1dabcb2eae131c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.134f24bf.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJuCRA9TVsSAnZWagAApsoP/2+rq9EvMm5xpT4355Mf\n1ZgOPvZWH9KuMi4kaketw1sNf3Tw8TcNu7e4YCj1NfSdYXvZzu0dZc9Ch7r1\nh4KILfPSBqTwkxKNqHrAWNHbg6UF99VYQ9OSSrfRVO233msoFI6bHj/+U1eD\nC7H+uv+q2244dQdYkUaUJpYHFd/JF83+cg4anBNdttwThS+E+h1FmlCUXbck\nlbNmcX8/j+GbFNQcdagPCfUkupqP1D0rKwN9LRNPKI92HJ87NN9K+yWf8C77\n5unMwBFfkXR0C5hNwUpN/4aKHCr3rU4QnEpUgnnZgdmQTcc1Ml5+bd7+ltG2\nPYxUzN1f6l7UiuxULdyOm2er6DxAheG1DojTI6GXGhfyRIXn4s+/UVU5zow9\nwP/9eG4aKpNVfcHcQ+IECulxPWF84BCov2Kmd1ziDjckj4vNTvcACvDDsgUf\nFM9RlHLyXUqMWMx0gWAIp3HOrXs6KBtFUB/Uf0+RHC1wBy7/M6HtUtcVh8nU\nJsQ9nZb9VVGOXeeY14mVlkuWuVwcSy7flE10PkGilTbUom/KwwMJnfdIFrx+\nL7SSXsY+7shriednaNq6CG7Xt9OW9Nimz+woO34D83G8nU+i17TJTVsyGchJ\nAVKKizcw1okEJC396M7DJN/qW9RCy/iTnNCW4TvUDVb2G141DM9vHBhAihQu\n68dL\r\n=0Ow4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJjfMozBdjMYMa+co18DMWI35G0pLtjNblaqg7FnIx+gIgEMh2l6ESrTmEjtxzvzDs10RszNbdsTdZsq2iEsBgxgw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.134f24bf.0_1625178734336_0.024473285379259302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.1debb78f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/top-app-bar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.d0f9f3f2e.0","@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UeTCDS8gVwrlbLxo0byDOMMudPrZ+EIh1Q69CVSQESPPNT6ahtLC0O3AoHJOcWoFH3aGxLHMzGWWVV0/S6IaSQ==","shasum":"bcff2e3c58dec3d81055e6808b7db6efcd05b173","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.1debb78f.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlOCRA9TVsSAnZWagAALA4P/RSDGWAJ5Spdo0pF4get\nQhAHKNdAbLRUR1TuwnlzpzzCtzLCYz8OzyKkaPCWU52nnxLJ/SdW9wkbl0C5\ngZHfbQ4YftGjJK7M5j2q1A3lJv1yfPlq58i10OSF2L1U9gASYPpaafUQWCTS\nHigqhD06MUUTM5GFXrwa1c55r0sskRzzB4BZtJ4xcRy+p4h4NjJ2g5ilJ4s8\nL+smBM7J6gJ+p9VztBJYa/KkB4H7mvdvvGovLIW+0fhXegEMREGrTIXcNycY\n7fgzmbFKWA6IA4fuW7mRmAM76s4u6Si7Wbg87w6a9Fv/lhx6nEtpkJlxRjUz\n6IVWN/kEbi/XrN0rjqpnUhgrM3s54fzGuM3Mn3KcvKwGCePp2BmdnVtrqSO7\nuzoMByLCWTnNDtHZP52bB6ZGywFOSX+5xQs8j3MAkDQsriYX6kBQEDsPiVu0\njJ7OiPZ+OL9Kcb1W+yYrIsXRY/CUYzlu49CUzvG7klMoVASs7XwRmzzJ75gV\nWvYGjv2zQJ7fODRE4cF2TNcq6VczxUlRT+THOciBudsEj1pV5Gkma3Fjs2UV\nonpXj0czr6oGubeC7oLRml56Ukp9E3Mz975b8CjmpYF1MWg+COpyw5s/ZqOt\ntCSx3enQAK9uJSgdLwVEhqQ9PQnLYJbTTp4dZzbmp4iHcRY+5zT0IqRyPy5y\nK3Yd\r\n=tXIh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHpdvMo5LZC+9h/oAry8NDXAAvPz3UH4Uy5sHmeNDVCwAiAGFuAQDg2HJhGhlgOHBOZdHWN4Pb+iA1+E4QgOq/6XgA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.1debb78f.0_1625618766522_0.05668825458330051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.d53edeb6.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/top-app-bar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.d0f9f3f2e.0","@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WVt7EsGMuNUD5bCmS194oCh+ArXXKZjJ6PyT9jit7pp/enjgFGnLJYNGnpcA2TZiqE4VhIC09L+3Znbi4eRU6Q==","shasum":"30eeb086b7fd8a685c7602924c502639ea193037","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.d53edeb6.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2VCRA9TVsSAnZWagAA6Y4P/2yJSegg7GRFAGU0GbfM\nqiYoiHPerRXgECOtLQcWW8yRyTlVwxO8kFy/TWNXeVi70kir4pu3hWNktSRO\nhlQusATFGtCZ54GgSohA8w1X9vyEkUZhve06eQtoYqOuGeOQ+G9L45GX6VRC\niioL2AzD3XlQIk7soc/n6gtFcb0T8ehwPtNYFCv6IL/AUyKSSLf/LZlzpaMC\ngmSHliuel8O7FcnKKZ08sN90tzmNai5zvTDcpDOXT3+HOg9UHA/J4zHiHNs/\nFKC7mORGtyBbo/T4S3P3vYUwVAxxZmQInUC1LhWunvIdM+b0iuOxnqMy5ceW\nIhJcN888OkBetD0NdkNwo4Eq48HMHLfRR0T/7qzO/KF7BvwfoCT9eO0BN66t\nAwtU18PHPvqAkWBKvLY8Iuc72iOyL4nLw/dPChbVXa3yIjxy5XpUdqw7sqby\nBXNaLmCercF8L3j+teK0QBuxrQrVa3bGmAXcSuyINpQ3K8xlXugyvt8vx5jh\nAkjjveNUa2+a1rxipdz3ltDjHMtnbXB6ERtRLTBMhk3lQFqU7lEWxtyoYeqJ\nNC74bRKn35AIDMrJxr9Exq6cbJCKg0d3HziyvFvzg9bVaq1aVRqUaE0ZnSki\nJUTzGiIkZoc/rw45xHIwF1m4GY+L2z94mh0AlixL9lkJWMaLLdPdpknglalL\nvbZC\r\n=n8lq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAu/4uIeAaLv6go6K1fnU9E1K2zGpUJsWz1ErnMwclzAiANxv5vxdiS6wd51nS7HK1wHhlUDEdXcHkwhFfq3dGoAg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.d53edeb6.0_1625677204631_0.6314190075839736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.2226489a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2226489a.0","@material/top-app-bar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.d0f9f3f2e.0","@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b86QT4GUFApZCufSXdqriUabKBvDh40VMV7MosHkma/M1dafTmAJhITy//9/nzkDPBae61u0dJSjMAoxTHw0vA==","shasum":"a0ef3df3bf6b2dae32cf8862f5b32b80f0285884","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.2226489a.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z1yCRA9TVsSAnZWagAAHSAP/3KsBiaADiwwuAoM5RTF\n4RUSU4DyfoTLLv3TB2bD9Fpd3pJmjqVlFBkV9mDF8+HtYt6tqsI136M7xKCi\nzpt6QYamcDodtnz8Wp70fpcCTaFx37WaAscEUxC+vBiatKtXf6GNoTKpyaAk\nxnr7MTonAJz5crABrLEhSrJN+meB8V69Nq53cmZfyCLmaenGr8EXz7S4Cou3\n3+xQD2VxTos7HWTFeo5z1LUnKdHOhxAG991F4PtFafeMn5mwRUedOkIUECQf\ny1u1n1W6lwFPp+g6Az7vcB6rwTVqGHNkulET8O22XCCiR1LgMZIasFFrBFJp\nWa9XTkTqN4megy0+TfUs5XF02HCyU8zt+RGuvzrSPuijzpeD4vNAc24H83hx\n2RotNzeh+7rzzWZ8kNijqivsgAMTO13jAz1/oHwgLzyG1V+p8IQvb+nAPeF0\nygAvJbPgL2IAYxalnfg9YdW5XCUfqvJ3H+F/Cwqr9pc7eeUlsXFeUkplqUwX\n4uYs5EU/3D1yYPBrPVibZfYq317WA2ruZ5d3hbOUcJUktd4rLBboEAOTYNx2\ns9U+GddRFRYtu6YkJYQyPhgJ4BSupNThmAqzV8sRV1CW5u2FrP1Y7Pd8CnWS\n4jZE4a4V3eCLnR159ZBMc6DCvc8G/TSRhRcPtplXH6lZR/98au0VWPryjiw1\nhVTe\r\n=84wb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICBpx6aWx18AwGVa543xuHXn5ZZIAo65OHrywA2Y7JFjAiBAWt6vL25R9H3gY3NLZL4rcbpxV5jMBTDibIi8MfNw4Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.2226489a.0_1625767281994_0.15581574474222193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.d4801c11.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/top-app-bar":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.adeac0549.0","@material/elevation":"=12.0.0-canary.adeac0549.0","@material/theme":"=12.0.0-canary.adeac0549.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K7kVqIK5mE+bVDdMYzxNpigRfBruwvtMt/lgajsO/GBsKVHSvVaAU+RN1vfvHGl6zv/pOrTFTU2mTR91L2Dsfg==","shasum":"aaafd80a0a0b2272987274632e76cab22b7b9bc6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.d4801c11.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51ncCRA9TVsSAnZWagAAFdoP/3Zp0Eb+5MpsQ+GpeTX/\nUVuLMWI30COZooggvB2EIwRRJyVdqjV/CEkHcVW6s2Ii3V1K34jkjDzwzoMS\nF6KrJFOFzPVlms/yIZyubHvr0QvVcsFQ4bG30rZe7gXp/yB3KLxOxBhcpUBt\n4qO976cpjyA2F2dFe4A0+HixW8+gzcHOuKcwbMLfKsCJ/Gry/FINrnJPdgQt\nTHg4hia7uo+b0TEurlgNtbnsxASbIIelD3DKX2pG0H4sBDI4bNSEeePs18IR\neamrhS26uHTWGBgm6Lj3uqHvPvv09YTgf/UNbfg6XseOmi6PNyODwc5sb5/w\nz44LM9GIupKHGNZkXL9zicG6mfnflmZDqw2S9RzRmWT4qv3eaRCBJBMzsbft\njM4prNR66iuWo9FyVunPwoNou0a6zgPJJnbUuiaERPnJq+QvzLT4eyjW0eye\nxM7cC4PiLIXEwgFFym0f+K6jwBrtF4lm0hdQGUsnKe3DWxLhW9ZY8PEZYZHv\nrXPGjGX6U+LUvvyWnTU7/yKq+ZVkMJUeBmAd+F5PduGbiV49mxrCyLtBMmGm\nFwX8Zfq70mHUAHzOiy+E+7ZFhYs9zFpa3tfFAX1CpCRHTIobP/FXHdLtUp1I\nkcREuW3WcTxbC1DKYUhMg5lbMSmaItLqREoRo61q1tZr58cxYHIqEZNKkMSx\noOA6\r\n=4vbn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJv/+UCmErPmo7pDThnrtircOqYs2yWMV+qDZUIibjDAiBHO5wvQ3LYgYDKKGiSLH4s6n7s5x5IW5uwSUy8IV+PKg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.d4801c11.0_1625774555777_0.27658048263087287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/top-app-bar":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.068fd5028.0","@material/elevation":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gz5kFD812AJLP3n4U1V9X+KU5JbpN5GxNtN3wzjekSvYZW5fZX1wuiZx2gjICzkVj+sCNeM2tkxBwcgxSOsD3g==","shasum":"8b29acf1d01be128c87c366f2bf791c9a8860a9c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7Hj1CRA9TVsSAnZWagAApWsP/0MSP1+mbW+nS+FqKyaq\n18dpEj1LLC/Oxe7jJCcIrfYXltptJK5BVO3fX8cJDi/aZMf/O1krsGW7VX0u\nlDc33Tf8tPsG5ljVebjpaY6nWp8DgUoAIpcmuZir2nels4vmQpd8olcULXz/\nHgqhc3qhypUhbDGg4L8g5WaZqXqGCAzzCzUq7vUmFaJ1l2gfC7dUViX1CEUs\nbfNFFFWv3z9slLJhfRAChiUaU5j01KpAuR3Ejn6Ug8O0TU50K7tbtsqfKeJi\nCBCgpEYz1EF1IFNXPBv7Kq9Y4Pgki7+/0wYQPcXVdJhDRt+1pEpJDBFucA9x\n8RRvZi8Egq2IRUPbMUJsAmx1XB/inNDlHeF0nGQVb+z7MNQkg2Vf5vWkA+iT\nXMtk1auApfIAvwWGqfCcvrNq4SIV819feaZDwNZvfcUyDToqckOBMh8lBJXm\n5f5wP1/PwiqV4oU90Bi3MYnrgkVOueafwtoasdfxMU9Nec3DXxdSlwcwUcmt\noDAXELi04aU3jXxFEjjolVGVzCJn4ZQlJeoapmlAFYXUSX5RStmfJz4hDzHh\ncI1S7+ohBo12U5qavwMGNl2THzTI6yvpIDm2371+FGKTB9S6aXacscxrosR3\nyAaV2dRHa5OGr+2fyBZZV4fbI/zgqfmPTOYPqY4qX5rzjIxI5RQ2XEp3TBbK\nrLP8\r\n=G1Cv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsPapDsPhMqUxdVJdVMEC0OW44BlqzSs0ZV86pDQ0zAgIhAPNjvzEhAEun8kr5wdfnklBOgDKIG1bhTSdSCdIy91h4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.7ec5f2d6.0_1626110196874_0.19415419278747992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/top-app-bar":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.068fd5028.0","@material/elevation":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qmJwd3By6MU8XnB+tiNp8Rl04rSuwAv3fXyQ3/z2iJaU8EbXY0EPv9PhzuIjrMsW3B4XFb4HZUHpuUdlKfwsIQ==","shasum":"49ad0dcbafc5cc23fdad4776c58caf984c4d02cd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.86cb4ca7.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9TCRA9TVsSAnZWagAAm3QP/j7yeoadVGszyWyRa8Cs\njo3e9FYIPiojEhjvzFl2g2T7OrreNN7vA/m+iHABAJ22q+PcGap9zfgyQb9t\nnp1idMhEsTgeL+YllVk+tPkbvVbN3qzPXzIwzEbZMhlRdVKidgpLNt458sTg\nalBmGtDg7+n/Zuu5xRHxf4y7gRcBzc7t55kJjruy/9MCMpKKGVlxA1tUcLEH\nVGLW1eo2r41QwVYmQoKx8UDQKJM8GKZeAcWzxgcyhOrGSrCHQr+kZuVYBSBi\n10UkvV2USLEi5wWOdu38aPw+jL1o2BaTJVPRxN2i5wFqdBbJ1Pi3F53UWjGy\nD8PWUpRG/xKgpFzKtecrloi6oJSGKkCG8ea/Mi0D3n85gV45GEWecWTiPfhZ\nH+1tc3LB/9g9QlMJ6RngyYNlhCpZ1dMcJFQjwlH/XTXOhenROwICalgqp3c1\ns8guV98KBhP7JSSK5EbE5FIizipdNJfRcqfx9kiBKvblnDrrmgSInsxRzMeq\nfhXvaSnHvDovdQ1pRbcbHPKsSrEKW6COBgg4tqn93fmh6izCCgZd+X0QNJcA\nXgZkkg5gzLZ9M1IeE3BORBcPqcilKucigZJw7p0C1Xvl1K6SNk75y9sjFdFF\nPpyXDH8fKhvGqTMj465qGA4grDxsRODj9Nik+DbCG2fSG+DHYMeXJ/4JJYHM\nGj28\r\n=qzDr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg9ChzrgyUCN+XDgySexEVtDdRvfUvjHzsqgA+38PAPgIhANcbjxdcR/jQzL9tpw2dfs5noJzV0+gI7ONz5oq5YOXD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.86cb4ca7.0_1626197843058_0.032939533312865255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.bc9a724e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/top-app-bar":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ea77795b1.0","@material/elevation":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zruTLJHw4DimCpQ3nuPgEySWIF9O+jyTxqAya9Cl8yc1QasHKte1Q4jNiJtWSyNqSrliQZJ7Ta8f6i6Yz2Snug==","shasum":"06af55c8aa04c30a4527292510346588bfa11661","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.bc9a724e.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d50CRA9TVsSAnZWagAA8WIP/RlgNjDVDqAg67yuiX//\n07M8c9FvONtkU/2Cde4iaChGJzMaadUMQDHqpearYj/OyfxCOpibNewcukgy\noYZUCC9pfi26GhnWgZlETNbnxjlSSrMcXgl+FN4l/HZ3Vjll9QF+Wnh8jLv5\nQWOotuULLNgD1XaRcfeG6Z7bIR0cVK9vttZc+BN8lKf98zh7+RSRgiZGkJgj\nlQoIix69YCS293giIAvJxftBdCnk7vqEXMC4l7+bwRWdw+3+z9EIhNNL9Svk\n6voZhqt27aO1TrWwPRDI07BHwk6UYQR5s6xrnsRxCyp1xUBvt2cKPnaQSdmH\n/HXSxDxEdu0dyZONsVq4vBrirEMjDJtPNhG9CB4pc//D9I4qdML+DYOJ7Wo9\nUeIuFyYjCPrwD257YA24eUe5iIQ4F7Ub1CUdH0ydLg8QnEJsVHhuQzMBCf/V\nl6TMrOFIuNGM9ObxWbUEdGulALbd/TX7heLOewWrUa2S8nB7xbykwTIC3b9N\nPYoss+CWEnyspCexKWAFrVjMJ9OR/MqPtkbYpm4FtPFshj1jNNL2Ro+G14q3\n0GokHgA6TqNWmjCBvD5h26A0kni3t9NDUlflomgpsw4IwRUChpjVd0KZQntR\nKvoO12Zu0OPHsG1TCFASEjLJitS4m1T4Bgd4Tv4/mpf5/VhgJns2gnHkiDD/\nM9Y7\r\n=K7QM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2q2gD1/iOX3VaQ1BNbfIvK+InU7jzKDMpNWsNAln9NAIgH3RiRx8Qvhn/eM5OShDZqfN8LqNBtOCmnKHNx6Cemu8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.bc9a724e.0_1626201715882_0.5484735677458703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.7847b83a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JO0Smd43zwBV2bNx/oQMtY32X8eNRFszZ2kN9BZ90gXObOVBA+Zfw0v/SEJeEe+v+6uBw7d9zCyBM8ODzNk5uA==","shasum":"b060c5d9823812c3501a240af9d3167e688246a4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.7847b83a.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxnCRA9TVsSAnZWagAAAuAP+wWKsEg09nhEVBgxBzMV\nvh/asxF6AGdCHZvqqBLOv7yYUxMT49zjPM/t866iqTOzh2HVcAK3P0vxTypE\nWPanIoc26H8CuJWG1R55V/HfXS/w92Fu7Cma/6mgEIwXjj2Z+CFQ8BmunO8j\nTLn+8Kxvwg4WhCnNn7ZXFjjj5FGsx92zrfhg8TxKV/G+E4HUUsp+2X7aDVnC\nb+LfOdcI2xBKpDOaeODUwGUyskj4JH2Yt53aNPrO5OHAQXS9O5XK+PY1Q0ky\nbIDSqm84935elCSSYFFE26QwEgNJsa7u68pA3n+RtIxvm95kHSnp6EeKeWDJ\nW8GyaulwZwKlzHIw3KA32duWJd/R964YKo+nFh+LIKDK4D+9HGz74TDsD01/\nc7AkNQFnv2X0+t14DUhfc6PwAUt428ZHFB+2mCsfVFGawcsbm7oArNNqgz5Q\nuDprUjDneHsZdEnN7JJsiBJxOW7xolprtS+BqiC5FP2cq+bfrbSPwP11a75j\nDFQ5Daz5SnRSW/WWi42VUiN6/JFrehew9O+vO1JvZcTKNGUe9milRcw2Hzb1\nGhwX32t9TRrcpvlkbvvNYzqU8EUUMxMzXPB+3r0wzdi3In9WK21iJ3hRZos6\nOwtZXBQIWiRIh+78A8K9gkR1aFS9SCfqnDTIM/g9p1cTq5DhoDoEHvqGHjxb\nnrpg\r\n=+Xat\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXU7YUKDvZIhfDo2qpYT/sHnoo8+gqyQcmqhqZo3usLwIhANqdctPCvFZvXYNdQJvZBMDNfvca1eyBRapdoGyf9pGA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.7847b83a.0_1626283110778_0.5324383419491465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0-canary.8cba18fa.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gpDO1SBbZ4YkO7fz577eE49JgeD7DneVgF3RaxqU3LOQ/id5cIL4mu84nWrxsY0hmNKdj7IIjuaYoN39JR6m2A==","shasum":"36ead2aa3b0524736d0c8bd2ae1dfac8c7db56c2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0-canary.8cba18fa.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70h1CRA9TVsSAnZWagAAO6QQAJeAgVe8KnIg5/meUYvb\nj63BjMdIBxtRcxdDwRYDtWjOGMwJM57UAi7A+Em1OkZUj8SQnzktlSQRbo/O\nIohHM+XDoEHClHsUeuF4qtniOfz6sS8l+QxIM3UEE/3L0ey07uDkVCyx+0UM\noY6q/UFYeLtR4SP0A9+xYvjCkk7Pj05/ONdFpmMGdAjCqR9WwhLn99w8/Af+\nRz9317CQcJjTT4xC5dgm8xKrPTwhoX2O7ia/unXvDWc5oJS4aXAqv1Vo/zQF\npg9pJF/BwnUT38gwdZYgUkDZMlG2yNjhv32x0fvtyJ5TXs5Llqj2hy8KI8j6\ny2pSRDb3MxqsXHpQABc++Gv15oAH3r5IK57Oq3ljL7mOMuNbIclOjfdEA3DC\nFnS406Cl/97i8Bow3N9evCVKsd0++oKhQEjX6lQvAA4u/aXqBpWB4UOM5VhR\nHLMsqbGDzGsxv6NZXjenXKU08a3CUfKypYiMMmJmyzZvwiUFdGfz5dveQs1l\nWS531QjoBM5zzmxNoAu7lRsX1/e1S7cCptBuD7B16H2aagml0yhJCSdDmA3+\n1bPU8RcMjTEiXejPFx9GUDGhdpoKkgbzXhPMMDHmo99AGLGwYypzdeh7hZUh\nNttJbydSQ0llbfFay1/ShUeyr1Rig9OlBJfGIZ5OauiVUmho9X4BZ1ovyYxl\nWRlf\r\n=MuKi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDmzMYCYBNqzYI2/cbvyfI1DoD68WRXS25Ukpae8amvvAiBggPaZBm4nz9FimKwTkggqm0qJotqYKbc1CWuX0xHt6w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.22.0-canary.8cba18fa.0_1626294389194_0.701537429884296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-top-app-bar","version":"0.22.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"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-top-app-bar@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-tADgQqf2lOlEZLG48ptbQu4+opuaDMTHrR063vHvTovN61wS/KKlCDNKhHmZHuqPwpXlNlnle3f8nFKI9fYttQ==","shasum":"f629cb8c088d2fdeae5ccf9f4aba46f8594ef436","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.0.tgz","fileCount":16,"unpackedSize":60867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72d/CRA9TVsSAnZWagAAQl4QAIAudheoHfqerSSq7UnP\nNvnnJBBhocy9W3HSP/lzKdXNL0nepGk5noJDsfH0MpMZX08foE8bHm2ZSIt+\n5C4lVzD5I/t6si1L3vyFoorxEx0usgQ8sgOM2ToALG/4DNHDN++zgJ8rV4Ya\n+q7ltwNBCulStgYyBCDI5mPtLGTbHpmNktPG2/ojFdCLgC44GijSZAfeHpbd\nGA+xI+Dypcs5jZFSiel4VE81eYxkk5pDlxzbjXeBw8+YSgJ68FTojqGIIEc/\nHAhIWzsyglCQblvvKSZHF8JHDFaQQFh5FQBZg0LKXZnOf7nT1BcCduHp7V75\ne4YSMfDkNrmLMg0eGWQ8PX18tuMxjHlnIabV7i0ke8iE277RDEi+uLxTFnYP\nxIso5fdIWShwlPk+2QG1VtY0LaaNrO9jGc//wG2nbuSr5E/RtY1SGbRkEeRI\n54B2rx3UyTq0FDkDZbIvQDACh8BrXKFHphSSSGc7CNObcpq0tpGOwGnWV8ey\n1ayQzydgd21quA3SGqXTBpYumynPf9zosklPyB0nZD9QjA6Y3Lj+fZXA/dnC\nGqUrhj0jqG0jEnBlZJCGNuBDk1KoF7zDK0o1pHucmsKS1qi5ZC/Cu4HBoVDa\nQi1+to4vbg4h9W0okOnLjQtyDQMRjbG0MytnMuNGDeDTEovsbc5GkDAOv145\nL7Go\r\n=K3Hc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD03Zv8AXmuQEtcffcfE6GVdrUWsme0nNvZiPyAMJ0ngIge7uOshjrFlfyfpnLcp+FpWZ3ktbQT3uEhttt7LOiqy8="}]},"_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-top-app-bar_0.22.0_1626302335345_0.8576681520572478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-top-app-bar","version":"0.22.1","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.1","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-SHQLjMrHRYsJaT0+8rNjkYW9LDi93AsGX+USuCYhVPeMhBUcqVmr09lTCqj3xyJ3JAy43XONPhtXjxlMT1jCNg==","shasum":"bebabd70376e617a90997a928e27ebb0002e4aaf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.22.1.tgz","fileCount":16,"unpackedSize":60867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72q/CRA9TVsSAnZWagAAum0P/iDrgc58WPIIJkyjKXBA\nFTwfVQXwaCwWSJ7bG21RtdUhaUFRuPAFRdm2TnRL6VtfrmWiIVLH8aCZ4OEf\nZ9xDyhFh9eyj18qaAFsUqj0pdTrBFpF0uYQaqfljQ/FTK06KhcfoDWB/9cxY\nZx6SgpSJ+1NetokKMuTAPrnLcq+aQTKeibhFnfw2CodC9giAHrAm4JkM0hXe\nRjy88/30621biE2J0TIPmn3GVoRK6HGTyayHQYgR3sKrcCqhD10Erqka2dYO\n4oUOUlmzwb4d5z6C644ehsmtT5L4+IWM9/MOv/YL0foey2Z0L5quf6GbtyXI\nbCPRRBBYQYqfUmc0nIoicAX5yWt1OVywbPyQcsMHgh4TP2l/7eC6m/o+yqJp\ntrXc6BTgmAkXCE2KX+2Afd/BiFf6AL5hglOlTavYmS3EH3VTBnCN5Oa09svM\nF2qE1QronV/FNy1N6xkKUEe/zJsvJPYD8YH9NYKQKRAe3Fs+JNJ2DPwsrLBM\nZShlciEoKmvYR5XpwBuce1PX12tWuzUmHB/EgqUfAQEIjbNA38AkieflmmFJ\nyzKww1egI1gPDAaXVM2N4O2Qmf1Y5DcWkXmqhKRXWClhaKxvDlMHMt/REy/N\nEfboFFBh2AO9iAWvk7gQ7Rjs93jHxuk3EEaC0vbEImFNSjVD2/rWgj+gkiQa\nSkz5\r\n=rgDA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdvJQ67hvZMvmfOUYtQGq1s3cl8oa6VV0zXAD2Wz5hOwIhAJNRReVE9veboo8XVlJTT6wHTyi56/a4KNesLI7hiqlO"}]},"_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-top-app-bar_0.22.1_1626303166591_0.8571693193587837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sKwxKs5C6qfhKvSf15vF88xFghKI/xyIDVJLXS08CoAPZumUcBvqXDovvsz51T6+obDmONl7/2LJwKat2zaeog==","shasum":"76a5734ed37f11a4167b0fd5a35f1bfb6427329f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.fbc09b4e.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72sDCRA9TVsSAnZWagAAMYMP/RFo0Y/tbVAT02X/1x5v\njRCI8lN69KVHvGsn0nWf9pGeDYUf5yittfk26bv+1AimNMON/5LTtCfz3tuR\nRt9Hcs+esM+HLPMoBwqoZ4AnHeFoX+ILzpQioRJCccIoqUmVEB4rF9yhirty\nHmgWN4PdfgaZEl6ziOYWnW/EvSIAj5aT7dNqt9CVuWR6rwIJ+nveBDpSTXxQ\nhQmYKQ7C0Yru1vQ5/TMIu0gFowXj8MwaGitJgbQE2JxWHDbxHYh5tkYoyaRc\nnMJ8x/OP/ezTuWnPIUO4SfhLwKly6aQSN8MvPycle8k8BqfZ+oqNI8WNMDxy\nAibadfRhuirbq55yRpl4HIojoMCzT2SgfaZLvpoSdf68shxJFGfowbhHblH4\nQhUM6cdSwVIuLWnyFQpO/y/8684fPnBMBIcgGCkAICPk0pYpysqG2FHe4RmM\n+KciA9dvXdOWwvjC8B7F4abdB7FuC3h16dpa3uuSvIjoNMcMtmc3pu4OWXLT\nKc/jSoHhcZYoMwRkujhAzB+VbSodK6u799GPyAEGlf5M9cg+sZGSSeEVSPUu\nQQstl50a2WYBQ0NSGQ49kPOqZt2lGe3xWoD/jvE6Fdsj/tiqoScjZG9/8hRj\nnYji9VC+7clV7xyq9mEtT2Mbt2INmHr4RJYYP636QgrfHcvWfEsmDb2YA9RC\nUZaN\r\n=xKDP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC1CQmWAZ5KUjEWVKBFjmvo33xe2/F4Nc1rTR6XDPV3QIgN2HQt3qhj/CNCiMUj7PHxJQ6t/GNgLPIfJJz0v+1Ki4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.fbc09b4e.0_1626303235333_0.6771804188095281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.73e9f83c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7Cx7U0WikMaFfnm2MhFCsD/+Ug/i3mK2yTskor9uSprc8SvTZmIJheZBm6uu7tK/CnLsl/1cFstiLckzj8RS0A==","shasum":"93d8395cf223a6cc8df41a0ae475ee73414ccd1c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.73e9f83c.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Jz9CRA9TVsSAnZWagAAv6UQAIWe0ZaE+7hrfrVnuAHv\nIu4DZHTI6/7SaRG8mkSi5XT5b8zeopwyjs1DiseaBZPBwGTENd7vJQB76lVd\nZYVgTHTPqaWzWZFrN956V8q4P7AmXOkv0JOpO/jQXocNjuky07evJRduZWuj\nWh1UlHBSE7qmkAA9UKPmrjGaWYRRLp8mFQ3SD/+OSWwdSgXdabfyKIE3b8p1\n3tz/25oZ8ykg6GCbvFZms761/ao003kOZq2sVKxQZHbp84YBM3lcT+bfTfFw\nm22Gf9/oSBjTYzGNfOgg1jSEWz/+RS3agDM51DXsP1eZ6kyeF7eoV1g/dow2\nVtOIkYVxMnYnH2kUsV7BzH7Trtef4jIBuvoeKhopQbitqIA/1Sk/rLIuHMC3\nh3tEdHmBjCoc+vcrFZ4TuJWxjWho1dDvCFL2OojTub5CLfAak5rxX/jktl6f\nWn7t0vbOMDmFh5dMdAXfk3cDzY9orhQ6fNx/aRZOo9dxYiXVjQnRk94gjgfT\nEJzESOGJ7e8D7rNDRlADhf2yUIArv1hfngMp2vnv62uXhz9EI+xU/U00DcbV\nMmz2RTOgAWnAqsSXuQewYhVTUUmtSkASFfvgkSh9RSXzaqzO/6RHi/z0JscZ\nL30DT3aKhnVg1aLKVLdMMkJ+q7EcMO+nuSsacc/ky15HCVSubaLsTdAnRevv\n3+Q5\r\n=mxMf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnRdcFGLKiqc7SXQ/dyiYKyNp159LUBJF8d8gZGBtxsgIgYWGDGevGlYJaMLfL8Udc/kUGcQHKTU3gV0EEA2x3DLc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.73e9f83c.0_1626381565537_0.5159223733346261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IJpZkZfGa5kSCk7joqwChEU7N9JpnUnKbNRsPDXPsIN0mGl55EpuuCv4cnVzMT/ICsIJ8tPr72UjKjWwsJmN1Q==","shasum":"82205396f74e03b94fe34d998f67165a1802d765","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKlCRA9TVsSAnZWagAAfZ8P/2+rJbNB1JWtDzDnSF5o\nv8zor3YH8RkvAmRImDN2+HNAEd9C1Xb/eqzH2tUkjBUOfVblyp9nzx2QR2K+\nb23HYG5cVwAR5lGgfPFrv0KxMEW5X5SFwqLarUjurIwkcWgcAgyxXciCMWZf\nxJYbM8bgsS/aS7j18VEd4vW/4M7fyd+San47yjpl8M/+q0znH/CkRjYhRccU\n6za1eMyonPpEQeYZIjkL8RAFUbeoYNt1Odypvxz7cA9rlYYRCUd3VKl9RwTb\ncmPMz/kK70XdnFDxeJO0Pb3vTo1+2sl8LKjFSVUDTz5LAfssM3+/kEeOoBcb\nrRUV8PbkR5rSb69C1lruhUq7Wm/4CH4USw3TfMXPQeQLbCmFRF6VZxeOSK5P\nk14VPeIL/ZHxIF/ygDIQpeqDUljIV8srHWDiP4BXnYHvsXNzQaK4lM6K8gki\nN3AdrMfT/Z+jz4cABYB5vkRK2idEIeh7Sn9uSmv9duqKDsSEnuNluk/7T5+Q\n4eFTLiaPUm4fNyjYYXx+Ua8xnajJBEiwsidsmCqAQ/fP+C79cVicFgxbBbQI\n5dFlGlL93XjQC/3e79CK6yUZFWYtHRKeB7ZNT5V0HlUEAtlTtTd6wuc+GQlD\nEKhlnO7y7060V44BPMH7vwW6D+KQz2xsYRywTS7mxYlTE5ecVbyeUkZzmA/S\n7nDK\r\n=vfJR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzPL/BeOYuH0i48xd7G5YGrr90xzNMyh3JDsOE70grpAIgK6XUOQJe9zSeK3uGoP/M6B+m7qXsLx+GQWTViwDKlZ4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.cc0aa7a9.0_1626383013152_0.9859411670596074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.a8fcac45.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ow9MRFAgMTPvj2MMw3oAcJIffPyeESLYqCk+EWVumh6GS1ZHIN/QX+lcGDYXC1zpjtWlgCzOIDtTugV4FcHH2g==","shasum":"c59ac02dd324e74ea25634efd47f4a7422f000be","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.a8fcac45.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcWCRA9TVsSAnZWagAAp8sP/01j4P9E/ifU8IvQxWRi\nO8CDtAeFmKmrJfl49Fol91+1uotzNzgMiLcraHCOqiHYJ/HvQTpaNOT3VjpJ\npRJB6WBM6WsSBwAMaDjv41sN4+06SjEMcFeYH2xTII+QjfCX+7Z/CH8MxoyO\nJjJB6j7L7UKmm3GFWFcWp3cMZWgDSgtWqv5fuL/O45Ku26Hm6e2b/gR26mUE\ntJP2kpTlOQXUnbCPwLdEEy4WC+R3nHcj57HKu07xFWTem8LCndCYgUa7ntpy\nvtXcbBjhPCkJMzuj6msNhtkDJBXbtRuym+RUUhqE2zUDCPW1d6KKiauk8KmD\nyeJbJYXHrbuJ6e+osrytdA4Vd7D9w0nieM/0rmxV8USW33S5JXNjxnjG88CW\n5fS6x9WhL9kKoH/VVsa45JlXfAClPezUeGRjsLfrrAcjiy6TYM06lJlCAYYE\n2oLm4C5U6PDOV/x6FhlIWIuawzDjGYjZpyAu6OAQ+G/7DJhYknpXpHyRxs5H\nQBR9DT8+cC7lICcc85QXKGkM8n/WSAkRVzU95OKMcrY561YQ47ctGYX64LI/\nMW8oQQFpOqTjZKbJx92nDFjVUZ5naep2NpfgTbLOTvf9UMk4DOYXaDtSVy+P\nNEUm21ZfVUBAK8VfbdzYSFqWFtxlHOEOFf00EU7DzWHFDB9T/aKCdNzWKbOL\nMhea\r\n=2537\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVnh5o1VmrymUB/J7CHE+kRJJcM0mqMoHcGupZmbO6JAiEAmO9Z6rdB9i5nG8GjGYQZ0FYXN+/+oN1VH2W+gfEiBa8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.a8fcac45.0_1626384150765_0.44061326972102854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.3ca580d1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zhD8EGKTjxXuHd0PY8pmpPVk1hJpMD/kfL1v1LicLDzQRGvEk0n2fxlsNuk7RmsUwGtquY72Rv991++akA5xvA==","shasum":"21febc863272de27ec6aafe2d6c1ed7784772581","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.3ca580d1.0.tgz","fileCount":16,"unpackedSize":60902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDJCRA9TVsSAnZWagAAgvUP/RUImZxT/hE3DDDzE9dk\nGJ/qNpgBrH0Ys1P29leM3V8vrB6rIHkjom3np+h1XZt8EEvp4kXEAsxRM7kD\nhIw6JvLtfy16Heeb2hbqlYCu84pSMWW2/cJ8SzQONZNocl6HXV/e+b7dr/9U\n84ExgALVAfjto+FTXvvk5FVK5+9i5HiXqVswNCUOt63uFJMq0zIrQu1pnTIR\npyfSRsxnRmBeiGeMHj80HJMquSO6zGsf4O3Ux0VnDUYCy8SAKOh3yqspzlPs\na7il4cDGG/RkSWegmr/tieIV1PrhCi9xfG6u8NOjTl4tQVG5HDKEBaYJj2Lo\nrkvmRtBt3+4K5DTRRU/N6ksa3k0xcI+Tw3APt9bWceSQE6yUTg0pmSiwdoEH\nXAczaJCyRZvUNYE9ZLgcTOrDy/K6zwdG3PrIb6QbKbUDoPhIgYSrqguOg3v+\nKV7y52xWsBp+kqd1MPvcwPQabB6WxMO20apjR3RoOnJnNZV3Yq2lFpPVWdaP\nnet92Y+/HESRLDFXhL4QMMalVm6P/5Yn+QQesd5xHTWT2kRh+z4/D6xguY+I\n5Z/BFn4y/MRDDl3OkPGfoSWWu1PNuBUq8qqwp7Hm+gFgzkxPzq1Yz8PHwAZ+\nEO6dvdHCdnSY7UM31lVsbG9PMiFSJtA27q68Kf8ayqCVRmoQku1bbB1wN15l\n3Cey\r\n=70cd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEecM/2vLtfW7ACyqdQryBVOdJLFAUPsUfHVww4nA6/gIgKYqkCjh4mdTG2h3qp2FeXJlPLZuVrzpe9TjgbpLF5Rg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.3ca580d1.0_1626386633840_0.9910784857487647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1zFC2pBCRv45C6twV19QEZqqfI7eCDN3paZDq8gopqoom2p2nlVT4svxOQEzqkzbwJsmUtYfUBGjGjsG/o2I5Q==","shasum":"2433b30fedc2a02324b4c225eb0fb2f75a5569c1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.9e41cb2e.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8L/6CRA9TVsSAnZWagAAfkkP/20IiTGLLB27uO3pp0v0\nX5BhnjUm4gog40OBMYpNrxU6zEPaTNguz16Vcc1gzLst+M/fHuwAe4RkzTpv\nIjm9KcqtajzpsuU7oazOjQxwUdgoQWffyQP7VTb7oTJ9PMDZ9br6G304yQwA\npeDFIUkowqVEDVv9E0rnyhISuMdv3ZSxtddjfd38EgGbbY64xJD29YgMZRNH\nrGZwhp2Smb0emsOd/76mrUGJB89NNUffAWO5y4QC4njuaBhhxb2ONiDNFEBu\nmYrw7KkJb53gLv1pfF1zzBZrL5pL9e6SBoVeQdybCXZgD5SqFJRVY3PHLubE\nc9VXd35DMXP2M72IOUWj8AFPxxYoKRGTrnR+0R1rtFv3zIYgAkWZlYwUbfHN\n20yl872e0HkDGWA28ORnt2Fm/U508qQKmCLN+GPRCdiB96Gd/20a4hTxc2kf\nBwhcgSiEZWuEnIXDPl0Ctss41sW9tdO8VfD52YLer99I1o34zme96A8CCg4q\nAe//HXEx/1HxpdpqIvpY/ZRFgiGW4EHA70QoSuZvqroOsRXArsYnPgCKR+UM\n61c2h+2IBbjWQcUzOHMm7LGh2AokhSzR++AA+F7UsLbjQsskINQ6Z2sDrxSM\nDy78cxFdZnkedPv5BLrX3wkcHI6E/CoPxzy1PaBDTphx454j9IuN8ZEKl+vV\n1m13\r\n=q/Uh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg9b9K1KB3ubXj8jVbHFR2mRsaNkssWfPs6ovNNdWrtwIgMOe+0zED81JIiWzybL2i4RYUuT0rj3dXYHzEPXI5sdg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.9e41cb2e.0_1626390522732_0.015531479630745304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.c180db74.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c180db74.0","@material/top-app-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DMyw/f+tQ8Epq65sXRjsKNxb9OPE+HmK9p8I8ZS8j/ybNPQAgGlBtlkaVAXTwtfhOoujVgR0KES8LLVcFeALhA==","shasum":"94cd6d1f105b221cdcff5fcacd434ba2848a5a3c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.c180db74.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDjCRA9TVsSAnZWagAAvC4P/jstKiPHXqgHoAGRh13P\nOn7zIRsSiImmSpGdMwmfK1hn1dIArCPa2I5fd+TTOCGjMmLCX8dW2FJU+4nN\nhqh1jiWBXvBZjc15xj+90GasfyUFGtKgEr6fbui+1FGKDym2+STPWElCkRwA\ntGaFB+40PpW5vDfV9hI77wgNwwz9OrZay3NRbV3KtzDI64R+q0HDj+7bp6lY\nCSmpSaEIAL2F2o5joJZpK0fM/s4tIEomXkx3e0ck06e+x8Gmmo74Ha3Vsj7t\ne11xPKhdsyf9rD5kzp03sA4gzshmhguN+rNZPmyUft2voGO6pvxGtxWefJh+\nInwMjdCAYjH+c9q2NXmJralAEFXCnvelW+0oGYHVxYsqzFpz05fvYG+5sY/u\nEVr0O8MaIbhtJgOIZJaVTOXZlb1U7QXpHw4Cx/+7XsBjLSrIQ8sXcMLh0yrd\nbdnt3l2Qfm+hy4FS6g+7/YFCLhemlQYEKescEqp3dzIG/Suu0FaSQ18kOK2B\nEEtenNPVZbzKISBuMuef3hWyuNn3dYVDkjWJb9PYMliyS5XHpr5jD42rIK1V\nygGwOsOjDxWQZazC+dpMQ8SNN9cqKjNGAIFB1z3kRJBdCHxx9ZvjplRzn8ZH\nTD+W7DEA768yi3dPyTcb+FTZNNqjP0QNV/nuPs7TYv6PUFdTwdnhr8XjFEMC\nAnnI\r\n=KOqu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh9aOItGzpI5BXuNbxaqKhyesw9sgaXXL6rn3GGGZdDgIhAONB9RFgTXpZSd3WgnkEk2OUdSG6bWtqxyMJtCVYQcZv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.c180db74.0_1626456291864_0.2592570360420896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.0d0a9267.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/top-app-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IBZvYa1GTZNuOWah6VNGeSkZYI5CJ5DxJM3S6wTFJbGKp7LjE63XQfRlKKY5jf53MkPsI3JVPjnM99JewwXpWQ==","shasum":"60e7b2fae7575b2946e16b4880f8228cb57462f0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.0d0a9267.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8chzCRA9TVsSAnZWagAAaTAP/RWjsdRqaujvr73v4YW5\nmmbTMZHCo9IS8a1IDPrLVCn1+s2XY3XR747AvSeXr6ZfjtwJHkmaOgOmQno2\nlQUUBQe5RaPeqjcvjBpVDu7PJ1peTGF9AcfYCf/rH9ZkzL80BQG0hqZ4Ub/M\nHNkYgwxZOTeTVxv4fSjBSKB8sEk+dvzOst/PmN/cNA3QShRPqza2RXmf578f\nIUmZZieRM9pKK3j8/+TYDlthr/SZqeIGqtW2yr38bksuzxy8XduYAiCcR6/h\nBcoWqk6nCd2tMeb3lMEKF7qLHWYcDi9FSUvDjjVpWbAbNw9LzdzlexuFcGGD\nfJZvq2zWcrf4ZFpg12itkXgB5ROc/RKovhz3TYMDMjqmCthi7VwUS83Ao2Q+\nuJbtQ50EdeNSL0FhnLNirphY6hEGV20uql6Kw1Ce+xfAMp2M27vGOLz4Lm88\n6C0xW5/SpImAT47QOI+yHLHVg2eigsL0qAkz8IYmseRJIQhHzRtkNeZB+VXm\n8lv+UaDEg63IRadxYZ3oAOmUXb0UA3A3OmJbP0PT5FDdiP2KICVIjiNCDoXm\nsU9FoLOgNSGZvSoNk4QnvOwkfVVeIASlc1mSBnN3ierTWcuMkv8YiVtZkShU\nmhRe8XGkhfRuIgmWIzSOB4zx22xwyGAujoEmMQdCLYmHk1Ofl8KNMtRFYro9\nxQyP\r\n=m08J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgNiTuGuY8yV8z4OWTaY5U6DadFznla8bph93a57z8KQIgFSc59TR6REsXLmQXDr4f13JhTzkhmT/NVTz+hjYQ8yg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.0d0a9267.0_1626458226840_0.0729342732703393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.d234ec3f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/top-app-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ugUoTW2/fLWhErrgGi8X3L5tOLtTM4xKZfu1+6dsxy0Y04QwPOHaLxHESuTuHottcDu0cXR1FPBzxxkLrnzsqg==","shasum":"439b1bd9555417305037b4e787b6851cb2f447dd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.d234ec3f.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8crsCRA9TVsSAnZWagAA/ZwP/13I3svlXcAEDpWgS7By\nOP5kdteiphr5TRERAIvi0KpKNKw4ljZNdaDZ0fZRyX1qBEZS4ECorqwGetcq\nsfqNlSV6EDY/SS7hqrAbWVNVSrs8cD2+ee3c9GxQLjVxnASBwvq1MBxCSFXm\n/CS5OouC2xkmnTXXFStfpalSDmmn5sHH/p7sPxfD6aXhzpXXAEdMaEWMTj6H\n5VNSBEcfy63Zq3RWyShcbISYVV09qexUEUHF0rrmAIk9WabLMVYo3wCOAXQv\nSVt6v3X4TdmXMcOGb30ary13Qch5L52lXyfKv0jlt0YiKDelHkVmpNlHUQj9\nN+iYj5PBu320vr1ZpCXhX14bidDvWLmK3tr0ho2F7Kd4XTcE61H0jK2kLJuy\nuabjN2HPoeqTSKQ2cEEpkzrbXV/Uy+KttPUaUKmj/uCtYexQVbN/nzlUNA6V\nxjwVxcfo/mNra08U4PdqND2T+I5F69vBeJenNHKz2qBp0egcB5jI27zsiwuY\nSDaC4vg9Jn71rnGpj9tzFQJAjRH+mkm1LrJiqrCN+mlPnHGYGQv89URNETFR\ns+c2wz76qDAcOFy0ECjbCZNvHqymPhgNj9VXbjzYwYZ3bU2b8wFdF4jGEMLH\nDu4lbTlKzpDV/Ep6A4FtDZtdNPr8YlKbqxM7BeB7f02QVXNhVEVfR+FZgv30\nzLlu\r\n=LVod\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNUXUoNDSSBlqjHTBHwqp8j+9mlAroOL0ydFSZxUOozAIgUlxrCqUl+O2r8BCyNcnnKD3Ypf6GHBCG/kW8V+Wq9u0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.d234ec3f.0_1626458860244_0.49771097155152555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/top-app-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Dnv8gRPO3N1EJ/s8n3A7y/FJxZAsLsziIWyeYh6l5S6QnlD4wCBnivTL0bR9belEQUuaOk0QsmOYOLhUemwLUQ==","shasum":"c5306b1f1a65fa938cf0e6150bf841123b1499aa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYeCRA9TVsSAnZWagAAWqsP/2y2/2JzO1Du+ENgrWh7\ndBZg1memomNYWOotVa0mL3rWHPgimHbtsB4yCaoWUxx6GUtlzcRp6GXVlaKl\nlJOoBHMIUU5WU8tHgLk7lMNTud7lJi7wp4LqPV5hDgeO8/X2y+CDmaajLP2P\nP7exLe1Xi7Y628JWg5IB9rYQ3jDBx+Siiff1Og2buSkdi/KL44yHMLinRr5M\n8liAlXZMJMSGIE2zKvQGyBUC4qAkFI9xx4ZsCQDRC8V38zNnpEw37V4zQI7P\nh6WW8XMVROlr10ajBcOW6PkmNn7BbfbXG2D0SvThhDYjAJf17ep6BzF0t3Mp\nkQr/WFOhIQMcnqsUv8K3Oi3XYnnQ+knKMBAfvUIf4nZR0ejMC1CrtCgprhmP\nsuSHk9z67MP/47O+90yQckRNZKPgO1fu6MyARPFel/0vnBpdAUi2NCqrXHFr\nbnUmYscd4pKia8tBIDpwgF9Gu7i7581CF4Xit+w3bWHlnMzhry6JUtNv+/U6\nS1FCm0FFJEfNdOR3vT8WzEteHX+4jlDb5/Or4uRBLLkq4C4YrTXCryXWjfzo\nrYYfK8yxGm+BRfMyG9fV1Igy5gMSWC7wmxU32VRqWgiC8u6EB5oF3v7emowC\n3EP5XY/V8GCsOuz9IliEJeP47Hk0S6rlGLMvFtdvKAjhh//Zf0SDlP2zW3Ch\n0Qy5\r\n=GUiU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFimLj40FxBD/wVO57ThJBaKzAio+uj8Sw0VM3agGuIdAiBLISSfPBUqHUKTjvsu7DHFj4D9S+wb+D5IoebCM8QrYQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.5cd4bcdb.0_1626469918599_0.3903980383785921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.2b133cb2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/top-app-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4isVv+8Abd6x9JNvY/0GG15N6ZciFgUch26LTvsq/KjWhc/AZasbFpdngZy8dcRKgSfjGXUq+k5yDwmedJAxWg==","shasum":"2d14168d1953b706cccb02f46e2c85cf623fa153","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.2b133cb2.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLkCRA9TVsSAnZWagAAqxAP/iLLy8t0TyU+KzVs7dad\nOSIZS4/RZYgjiAd2yZovyYJJhtpHj1XAi9cTAo0vTfHZIbLNH0hGhhnjz2vI\n4QP1NAK0Z8KMikrj62VkwEOlnvuKtnIhEpbUsWX9A9S+L7rGNNFBAMNKZmZN\nQGwuG6j9zEfTKyhtFoR7e1OpGsMFYzDVRCgjZug9LPqOqtSBy8XBuYjbtgdL\n4pYuZMhI2pmDaZN8//EgzUoY3uCRubq4qXZ5qg5yc8RoXsjn0WW6JehHyw3a\nBpdcTlT2jySUw+tT5pSj85YpxedbU4+Z61TsZR3ieaJHdoToQXpN+gzS+8X7\nhj0fNVamq0wyeqXLd+/VKlwuT8JCkExJ2C1J2N0vyOkxoOPwbZu6mPHQxYWK\nOLi9GYXjKPX+QaxPbPFm1oAF0vPUYoZGR6pEYNrrMfJ1nN07nDj9PoUZHBcw\nKd32s6QX2Zhctk6BI1536V5d2ZCdUActgok8vn603WhZbU67eWNeq+urVJac\n0WzBjanm7WCAE3xsGaIUFH+vvX4EUXc39sp2hjVu72DNTUzTVkJqee/txFWm\nYGYoyxhy8k/Zx0sH79MluLn1D6uMq5yHUV5Q9UiFNJEeni/ROMsOIjmq8G0J\nxwzXHqCry2iTGFketf/MOOA4ehwGAczej/8oK9ykBm9oYAMIIUPumT2ksjXo\nkxxD\r\n=fD6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjqeNGQv6gc9u+EowzcVny4mQuBvIobSUYeCAeFhI5XAiEAw1PbCGCkCCUzdeIBx9XPTTie8nmQI8TSTsmGfl/y/Bg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.2b133cb2.0_1626473187843_0.07246760694276588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.ae4f422b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/top-app-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2mugKUFtSqp6cql4v5xN0YZednonRO65wGBBVDeO+xLms6bSKh6OdVMPhxH2PPuPjIudaMXcrCrxi8ld9l3pPQ==","shasum":"83cf8b9f0b6be9007e33d3a6255af00c760dd79f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.ae4f422b.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwVCRA9TVsSAnZWagAAUloP/jAKb5cndigfNjgVkUOe\nBo/F54wPS6QE8/Z/1G49UkBbRGszpf2c+hKyENofB5cxCQwsK3c+5F4LFPgN\nlpLxKRKVx7YY/NscWfBhPtUiIPJB2CPEqXTiF228N4Y1geDFICGSEzQII/Bj\nQn0BTuiG5wCxq4uU459zA9WJartaDUzN3eAEWmarmHfPabzaXgW3K3J6Klpr\nqAHKDcjByzTegyi5NQ6mLuDGlYkiCqvBsSf4SZMOlQXmo2Fl5dILJ7feUn1o\nr2YYgRkdwMlDNewgxbSqRScfF00KHLT9Er3X1UbWNisbzcUraLu2PCfgxBEn\nYsMmFiizkYdPCp2XR39me0m9lKAjwKGMx689Q7uJ2w0CDst6mduCBtqu1Crt\n3nHCDwCcyVuv+bo5TwnYrl6Ds+zw7cogvINMuw7LIu0s++Oh7RULDyOXJmOj\nnOB1ru6VAMYktwgrb3HDSZ7B8LpazDSZESJ89qOAnFxvYwawqUqjBQI6GBiw\n+vWqYT23Sl7l7wlvjnVUf+Js46XMS7H6Bj2MiBX6Hmf1j+b9gl28n1UWiIpm\n97RzwNezehm5MJuZUMWqVdjqTaLMJxWLDpVIh7lJQEvHOxa0+CllJjOkI+ru\njuiq9aGMEKKHJPG5KAheQzAv4+C8F7OtqQbbqmzZsHamWREOin9SwvijsEQ6\nM34M\r\n=LxS/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCf+pvcHXy9MY9KHELaK0wQIlFf76wJsAQh27OP257+/AIgYbqA5N0ERl+KKTA+SjqiLfgGJIlS0D87r2UoIwCBkkQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.ae4f422b.0_1626479637063_0.1607712952676963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.90ff8057.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/top-app-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vd9hb3yhNUP9fBxY/yhk+zlga7Ia5Db9t9+tYPtk0Hh3glk7vP+Cc/eQ+DbDws6Tw9UXmISQs1SXoESwKnTv4g==","shasum":"07072188c29c804dd22e09adfe2116825fdc9fce","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.90ff8057.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YcgCRA9TVsSAnZWagAAkz4QAIOSdS9x5x4RoTqVgeGN\nc5BIWQk9BhlRIgAkTN2oztAkgboI6lFaVztuo81sNUqopZGZCNlgBzeJUu7b\n+MPQ7RuRY83CWDWQxOdHC2T9WXP6w9y7heaxsP3zU3JjR1ftPdi8LaLYtrOq\niqVg3gXlbCONteForqZHFpj3OXgnWLKtiPcE0xZzd6mI4hBh4CyfogEDfDq4\niRs/uaYZYo5yAB/wW80T/mguNQ+ndwsuqLnEpMr2VhyAm04IJ5spVLZXpGuO\n75cZ1eRByV7kpd9Woed9u+MjH722JcsjAzVCz1qaE/P5n1Tw9Fpsm3rJ2M5Z\n9Qga4PDkGA8r25wEbeWT4z5I2qyp1NP3G6jo5TTqE9DjNx9Ul2126tPliQo3\nFYm/V67efESMAfEPBiSMPmP8pARqLdszm75QF26nXWlYI7KGmrtwzbjgrHH2\nZIRlaRYtAVoW6Z0FAkDC7x9SQhI3rg2cyvm/YiJIii3Rx4hsxOzgI3b+KRiW\ncLoQ11UhtaX/mKd5QrzTBJs+kDGJPbwQTEqalJaDdVEreg3i68EcqOTcB6mf\n7m/95wDpsWncUKdxNHEURacQPC9Oot4u6s2mmTvWhNjCJnhPFPIYdN9IjMwM\n0OUMAWoX4NG8LGfGWGjAKpq33DVNV9IcQvr/18opqBR7XzwzydrULDRyAI8v\nwCAb\r\n=xT+i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDjlsCwMNvxxf58GJcE2NFQWC14Sjz9O82FLkobrVuRAiEA82PUAlcgjAPk0SkUosZsh2vk743MXse5xnVT06SCUyo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.90ff8057.0_1626703648622_0.24539781158799112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/top-app-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tXIvEYZENQhgRUtqO+oVuRjJVJHqrNO2nRkWtZU1UXKsVd8FifMc11LjA09tSwPtCKlO74bYjxWA8ANQaSME3g==","shasum":"e1fe5455fb7abb8ec4b47c723bd7da82653e16bd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.dd7b75d1.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9btpCRA9TVsSAnZWagAA1yEQAIu92Exq5cs0XCeGPRWu\nqJGOBf8wBcyOTTEu+NNqdK0Bk3OHe3MfLG/ZOKNUSQ90XA1NI2HY7zYIUc3S\nhVQoVvvlMKaxro3gWg3s9b7XUTG0XHenTuiNyrf/hRrMVH2apwLBoich2/DZ\npKnnrIV0bNDm8kfAMHKSRoqoLWJ8ZiMinY/9eThRXIdNrdB6IKs8Y1ARTG6m\nRHsfDQe6+RhT8j0RibBZRpvefWEPqEOMLw2sn3651P7TMIQ0GTho7+RaDq3D\n31sOYrb7hyGjMwy2keAsmJO86YzfMO0+Kw/GL1J8HIE/tKfn63S6kIm2pITJ\nkUvUxh/B+Ahckuzw4BW4KtPKqS77zvjxebqlVxyAO+mj3d7ijE3MNEd1qdvI\nLcYN8ugTps0R9/NMnoH+95bKBqjvqWIohELYGPdniuOMGYpJfsbyG8SuZ4nF\nSWvkDh2Bp91kv58NVeQ8DZ3MSRVDCbUzwVc8SnJFfEDnYmdH6/XcU2ZfmUJG\nEleoN39VNIJ1cAiwd9z0h8rVPwzxsBfKAl7qnmyMsuLuskyvudLOptfKl6vr\nxUWerMv96rOgmUayvUHvYcoTXAPEaBeQbUtgJxl4XTWfY7xiJTMFs27gib5A\nzhe71blaNquqETw5YQL9cJDi7QSxzTaBGBH4HNTizhokJaKsBGescBJ6NOaJ\nidVi\r\n=jpqL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr0d6IrD0crVxFeV7MQrmkrHGhDAYSzoS2LrWJoH2NQgIgJajP8ZTu/gEA6d9mkdDP2Vuzu4+ET5+ix6n7Svv9DKY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.dd7b75d1.0_1626717033728_0.623197922412075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.104debd5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.104debd5.0","@material/top-app-bar":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.38d1846cc.0","@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wyyKt5ti8346i0RzH/eo5JfAuPy6/UWDaSoYm67c9cl9yaSHMSVHCds+Z/J3wDL2bzuGAW3FfouF8KJRcCoh+A==","shasum":"683631725b3b918816df102a0567a2ce812d025c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.104debd5.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJoCRA9TVsSAnZWagAAby8P+wcLJNJg5m1oM6yoybxL\nFIlyjHDPKpNUpVE53I84JYc5EwmmNDYm3xkfelQsAG0wcY/Q05Jv2bk29o4b\n17GPFhQ7W2Uiq2xagHCyVB52VXU8PAN80Kl64nhDfEulM1gHcFR0eajb8OCN\nBxu+tk/uL8WPJSLv1rgIv8Gla14j9Yg6/7iuPQ3fB2zA6c1wmVE1nX1YXl2s\nOePqhJHDK7ofNBONtC1r7wvHSM8ber0/pPfP4Ki6yaP4lBENhM4ATunqdzRH\nl6sXcVuZzH96xj8WL9nM8kM6XMWIenMfnJw+AU3oQDrBqZ8A0O6GA2otKAel\ncuEC8fnoYVs/ar/+1A2CpqWaJDO0wBDGuQkHsxjjXfek7nXOq3+BZkY0o2JX\nIsDdLecS07mLh1Ab4KSUW32Hq+M9DXBDphT1dtm3yEZCAaahuIS4nuH9Qa2+\n3eYkRs9i0ozAoRTllxtLF4/Wh+NkD+RwIpyIfydwoQsFBysAF/cV0BXhhRim\nEevD6Y1AvaK+LRXrWbnJ0OpE7JibQBtAOp54fKmK/o+wpr5ZPtnr3XCSo//5\n0NQXWPseTlRPkAsSHqmPjcDQygdshZ4Pm1C1nWx+T7ti6TdQA9oC9AZWGK3D\nb+AeeG5odruZP2gxcPZQIXXsdxg6CJbwgERelyoIxzFzaT++PrjIhTJvvEWN\nKzkv\r\n=1hH9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATLEeXEwJ0uQfQzdXQz1bK9Hpmm1oPIvulWJWfr2PtcAiEA7yM393R9bVRF3mK0tfRWeo7h/b9GLrtUwT8q7uDvBug="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.104debd5.0_1626735208383_0.953000387576818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.4612705d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4612705d.0","@material/top-app-bar":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.38d1846cc.0","@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CTw2EOI+Hqj1E2tfZO/jQOFVNcYy/4jph6k7+iyXaDrI2dzVqWDpydX3nqECT6cR0G3/YTrxMnjF9JilD0fe+Q==","shasum":"987c4f42ef8e9a4a8848d5c133f981d240b4534b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.4612705d.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQPCRA9TVsSAnZWagAA6u4QAJva/5eLceU0tU6JNnL1\naekMXNBy4PeQ0q/3qiWXUbcjOZLp8ucCyxpVNa2FWFFW3uoVUSqNYnj0sJsO\nSrh5+cg8EgD00RTSvQLOElwmlHwEr+Tqq5M0Q/EpnEJD8PLzhqDmUhTwQ5Ny\nyeyeAOkGvbnwPglWWgNgejxsiLBAlDY2V3QCDy/uEe+1b2qD6lfOEy3EaQ3U\nX8dinaiAVzVpr8ARm32GsFC7X/n8xOrBPkR+Ik/hMkY25+2Rnd64qmIKJTdw\n5cV787GPR3hL6nTFCscUjLrqti7NEBgBao4hne4uft9JtLh8onkRYA2skz4C\nbEwD7C9iXjT/ueHLiTU8+eeJWmkcyx64TP9qyJbvBaDSKSE1aaspw/oYDdnb\n8jTglnHgPw2wFj/Z5UYWZgi50G6I3DkKFEo+hLlktkZOI/DcDtQm/jL6uYCz\nA2jXkxe8moAuROQGV2XM3t9/wJx+Sl12Rzzqpbe5FV3VMLYU/Dtw/54kv+AH\nr0+IJEHak1Ii62Lt8UXbk/xXC6YDNnt0AoSvv4yTZvGUON2kdbdwRcsrA6l9\nLpfKiDtgdWAWBFeRt59pYO7A4vHWmJ4sqxbwWbg7z2ttZt6V1FhN7iuUmms8\n5qAGYCi3WbO60c71oxxyXGVXPxnCyuNznM6IxufEmjFbt57Exdp2w7lE5m3v\nRUvi\r\n=GsuT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDG6/4O/+RXMGEkUWd4eJq/YHsYvWxsoFiU1xi1N1RyQAiEA967SLQ1pbF4rcLrbzZb70mD+zXINLkYAnn2kQZA5MJc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.4612705d.0_1626797070823_0.6137969046127254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.b36502a2.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/top-app-bar":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.6b0442278.0","@material/elevation":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oHk0cSIBnW1IDnzk3XHWbmuCZ2/3L2H+F8d5vr7BAasoX0050m3gdiiqSoM8Wu4BC+MNmIOf+hDLWJLAqUam3Q==","shasum":"dcc62dde8aef13e1ff5530203594a20fd5695105","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.b36502a2.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KD0CRA9TVsSAnZWagAA0gUP/0bUKMNADbmLosp7D7bO\nWdj4hiGFK39Wqzf0mPd8WkFQ/z/ybhmy41jZ1qT+S25hlBgtbBiqtJf4hGhg\nH39ediO+NhAvggF7KpWXKvXzARVdusVRN5XJwo9tKC6d+4QDD+KtiQpCzy2W\nNHjMN3BdZUgWMQuS2knLpa5CmwrBNm2eWudzeop63pI8Qpi/Yf6qP/WBPyjA\n7rLjZ6bwrpKM9EHn3mmPFzVnk3SKoG+GyQ5JqRz7vBvRTV8Pbfz4W1go/yvD\nSuIhBBSFxnz+zUq3pj4oOPl/MeXrznZ8giFYwgPIQaRCtXBCFXrF0t9h+6be\nAjhbHXVT7dSVygAzVTTCN+5NWwMz+cKQYywbg9bD2/RHtJFiBO3MORLsazRa\n6mNTzUyvnw4oqlif1YuU0pRvc9o78EgTjyzu05L7wniwJ1ZB4S5gbBOtdk8/\nN+MSOv1xpHOPthErkjVnz7oh1rKwvoK/ruVgjsSV934T6bk9RJcR1P80X6YJ\nXUlOCDS836l0cFdooKt67XVrug19uUxBhtW6nyIoJ1fW6Lq76ICrpOHeLmqq\n12HbNmQbYf67gkCFLGfRJ6mvoVZKsMvfSel+OiVTSfhCm67nUivik1dWLaWo\nxOvByV8Djc9U0VxzsrtbALuHNNNAwJ20JY3rrehydwc6nGg6QVr+jsdolDxm\n0M0f\r\n=A8ua\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBkGnurbsE8WFk8B0mjK2uLF11ovo/ARZBL0KH4S/uSaAiBntT6xFU0+z3sbvEk7NNIlSkIP8xFDzQ3sgtPa5UhqIw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.b36502a2.0_1626906868558_0.346342551130737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.2c392ab3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/top-app-bar":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.6b0442278.0","@material/elevation":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h+Gh7mFTxdRKwGMeenOz6eBKC92ACWE8eSlmSM4N7ugmrRQvQuXrOLkYTmEt0U7BHwlYPbthYhopAlpcuJX8DQ==","shasum":"af6c7a847d5231fac624ad56af4a1906efc6f267","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.2c392ab3.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZACRA9TVsSAnZWagAAoKAP/0L5bRL8q2CiLHPuYSWz\nbIepaYseIlyoihnre54rIrVHbZMVHethgsCFXNsNMIiQwj6PUABBvPhX2+xc\n8DuEnjBidNROsRBfFGY5AsrUaIbld0Ug/rQ+SmY7+/SwsVZpBLZYiIinIbcv\nlpTB91gkhBAy1eJjTY++3aJGZdDftw6t9Ed5TP302NNfl7+bphLfAE2SPLXf\nhHnBrEumQLE24YnI8IHcuuuPoJrUN3I7vx5a+nXfcmCEtp+TJXqzc2hoBaSa\nhEyjdpMn6p7TzrMkKbqAPv2KIp4KKLXUFS+5bX1gBphkUtiDshD+ViOmeA6K\n23D9VemZcDGp9Ww481ePXe4qvdK///kajTMPRZPcKL9n/zpveT+Vx3zF1Imz\nhHHwKXZuBvoNOvLd2b0Qa5N1F8CGG+XB4Nhs8O61FQc46m8/fjz/OP/D5iKD\ndBr0gcntJCk/hpv8DfoGhASydnCQPTk+Y+o3wo3Kg0NCy0MZpVXru/sjiNp2\n3+g5+ZAHb8wWPhiuuQKhdLYLEAN3hr4uSMUkMldxeG8Gf2FAadqp6/x5XTvs\ng4nAPg2cePbXi7fltpx6iFa/8sDP7PGvHxf4/JyNxFNQEwH7rhpSFqkAKkpR\ne2YfaG3xlXcQiZSd+4Ap+L311gNMogvvL6YkdRpjJXn9RdncfmxTW7gpPhBA\nyd1J\r\n=GFo4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfomylCSBjUsf3I691FKR1PjdgGYYFBtYfIZ3pH2GS5AIhAN1cZIZuw4F4VBU6pbspQOLPY1zj2DOibp06IHsA/ooG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.2c392ab3.0_1626965568667_0.6901096823861683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.e8bac95a.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/top-app-bar":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.5f00e454a.0","@material/elevation":"=12.0.0-canary.5f00e454a.0","@material/theme":"=12.0.0-canary.5f00e454a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-98qoixHW8Uo5sPf2LzySE6oiVXMQ7nXEprzbXnfOmz3Mwn9fvhFdt+/cc38PkIFrt+JHZHpmVBazvRQe27Zeig==","shasum":"edcc2d73947612d880baff61340d3cb58e831151","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.e8bac95a.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b5/CRA9TVsSAnZWagAA878P/3upu2/dB34HZxxYh+D/\nFgI6iTeAyTm+tSk6VfVIPFRduR4GsPDIcB+0psmX+CmiHcV+042vZcVBF4Xs\nZd2U6Rvarwkoqj3KJL5yJuWS8BqCvXer63v36rV3GybNLxJUZYVf8qSZRK59\nDyi75YPcWuO4xoqh8iKQjIPYXL9//CR1UWJgfPbA6qOpmww9HjepeDUKcXSC\nccAztw7ac1qLrLF40jvThMoQY/0i4+r3+iIjUxwWKpbAjbzPnLQFz9jWPnDl\nC3BEPu4IrikUgmMy6fY0t+sbTVxn3qEP1TC0ZKPJoEEzmLKr0Wh9/ihfwN5h\nz6N4I5T3kHtHimZFsSMI/ZubLWtD5HbpaXybScBK6KEFUYJb2raCbJR5Fa5k\nYEVCqxSuJ7mYAidVnEWJKRoj3ojXlfL1KWe+T2fYHNLLZpWFNA6eLGgCGzpQ\nG3yidsDRX6OoF3KyfJyUGOpVIGHB7eVUIbWt8x0/6gElX9NROYS4/FZRjwcE\niPZ9gYkiblyRtdMYT7Oq0pddfikEJXyakAZVj3vyrLssnIBCc3hISGg3sfDU\nHXAJrjViUV5IxBdzxZAOvEC+4vCFEcCi7L31aMsXZajKIM203+C/oE8/Ejxj\nGYzMPSJ96KWwayItVMpim1xqafgxm4rmtv+B1pRp6iSyiYdkzn5h4cHErd+u\nTBwX\r\n=pVa+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5axcPv5Wxvh0oC/fv6+ijvfuSmhGx9mziD6ytjKS0vAiA6E6QZfMk7/158Rey4YDKa9eBUyWSFOPr3NDEoXiznyA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.e8bac95a.0_1626979967431_0.4369574935622387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.38f29f8f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/top-app-bar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.90e08fc6b.0","@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SGOAyeT1J6T+fjZD3mtF8ZjCw2VZf2x/K2rqDV5hvKjt87AkZ8dVjc/Oah+yEhkP/JSOwvGx0W48A9sL/fARwA==","shasum":"9b5cbb890c8e8c97ac07baab1d5952e3bb5c008e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.38f29f8f.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdcCRA9TVsSAnZWagAAxIYP/3lE1F75SFxXMdDU1RxQ\nnjvEn9cqssGTzDwpwHmWqt5Ca0Bi84gJX0dTVsFIm2rJsDx10YOGFILvSxAw\n+mu4kUqx6mGzwlyaJOrLYs89EIZJ3NR74KrOv0Qk4cEyAE6WKKznvsIz+/Gc\nhIzuaCvgXe5n09Rv3vXVkZD1Sc2hR7AnljeM6dTSuRNDOzXkeRxHMs2gsqmV\ng53eHrCaNbSIgKPSh9N8SrXDm96VbhTXQdxSkY8lz5Hria4NpVF3q3WiSgTV\nwhYy4d8XCLPSn6VFthQvB7UwOfxrKYEIUFUcGZgRDgjts60JIW9u8Oo7RC3x\nWgrwJV7uN/5LTWJOzuzOXLZLj4q57k8n/lOIeBv6EBeSKC3gqZ1dicEedknB\nvJk82N4GU2PkJ8yarfe0bOzX5aBantl2juvzbK4VheeaA8W18gfiG7m85Gat\nfa/ts5RMUEpflw0oojyuyJtVsg5r2l0qKX2sj5SErqzodE8N0K4fcsPZNkYC\ndSrKxEI0hj5b+f1Rbei3NZj3Yt6fCiLLHPA4Ux3lVoRgVbUjj1LxQHcfLXlB\nbevwFITwrijE2FgOjytvf2Ngw1dhhgGUlt0CYyd13y8DKo4Hkb1e0d8TM0Cj\nNgoN2nAP3PXgjF4+pxqh5J6j0BT+2QMiRbtIHPDHFgw/oWBSi7g5rtyS7IDq\ne3NS\r\n=pLX8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNvSPAoxELpvn4ke92AtGaZKLE0HdOac8fUywExPmT9AiA9nsoTdOq7UxAi5npCFAkf0O02loZctEa1JuERtnSjAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.38f29f8f.0_1627064155998_0.9358112832310344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.e0693475.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e0693475.0","@material/top-app-bar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.90e08fc6b.0","@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-f1ohfR4YsRXuPdi4UCpS7yh6AYANujMjbDMs7GNmurxKuJ5segodPohMSSny0+47bZLsiR6r2bRdyIOMzf2Fog==","shasum":"07746d6c7a4941c20063f1d9f5bb9d62cab0a655","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.e0693475.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDECRA9TVsSAnZWagAAtSIP/0N3r1KR36L6mP51vUal\n4AJ3u8mYwrtqROCPnjQPvWiPxC6QZxJZrafFX43dJ7C+aHoFSCmIkGdW3Pot\nd5XSmZiWRfXTyIDxe6b3FMcYp1QIwk+V4c/WYRnFbgQ3MnRShZI0tz3h8TWq\niA93KPLsbhb5l2ZY40icsY8WIjZjfqMcnoiWzzYUbsL+pYkY3SQUKwe3Zlat\nOfN4JoCSt59TstWuI0x1ziU14O81iUuKmT0K7cTRAlRis8P00T2laHjafN7O\nqrzh7Hj8YM8dALQnA6jfL0JbQC+6wcwGtFK40DYJWBdcZxlTB9SYjeeXNUgy\nwk6Sm5lb3AqyBUhk1ZlcSwRAFiJrS2HcgV8DYBDKHfyK12Bx3lHgUbel3q8s\niRzSLPHV6yt4QdyI+yvMNuVMSZp4h7CyxauWdFsoLMXWHeKDhssy7P9Wz/uE\nAKQynwH238/qXWNT8UqJR7IfLqZwpm20W9JEksTUv4h3A7tME57g1O5Gt4xQ\nBg+pZ5YARUcCCMlmk9FNjdD1XgKKDf6Ln5+O/Tcfw4KaxoLl0dpPynSgQa1d\nmjRVOWMC/pF307awfF3c2i1v+8JUH7rqz/UREewkmWrbQiWKYG2s2Od08tPr\nq61NZBvG+t98CnS09jqP/rKlBRA3MGOFNSpSthvZKvgA7ESvDG1mKsu9dXiK\nbFx9\r\n=32SP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3OgLrELZEWeC53Q6uZR7+meafezapBCmhkk+N5ANiXAIhAKI4KqU/QsaC801KRYT+v3Vp4AzIrZal13aIHN9Dn2S5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.e0693475.0_1627066564319_0.4892125532689757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.d595e030.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d595e030.0","@material/top-app-bar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.90e08fc6b.0","@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JsBUiLN02IZ3+nZwTVReO41OpjELP8gdcqyd01+/JJ7unc1oqt1OgUTUFLV4t1WFZ8y1IOabYXBFaHLDHVv/LA==","shasum":"a400c23dfaa516c494b1c78ee27857183d606429","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.d595e030.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ywzCRA9TVsSAnZWagAAIqcP/RY5s8rq30QAWD7rjL7Z\nw99hZlWhDGM1wG3qfBtsDXxhLw8qf2H4Oa7ohX35b7+wQVnNiB1awXNJvAve\nkBTmnb6poisAdN/VEdCO/g7zXbOcYni7tx0I6NBlJuSSrUuVXyrvLufgq5vp\nXdx/SG4qWj3gocg+tnjcVqcsPIsrxLU8PUYnP+HP/euKXmY5HdVKlznSIAAO\nJvXSYw/Xs1ppuw1EAd92gA9yZEGYQkrN3g2jWtZe2BC9smoqULTL/sPNA9gZ\nkuWXISDnDj7dA9CbSci+mph8CfnpoD/dtjmsrbX7xrt1ad97QCBxK1qp6IaA\n3o5RlDo7+zqB1QEAs7kUf7LMNMvKJ1K7qvXjXu7e4Himn6u9WxASJXy+epZc\nj3/t14nv5yhk5Ievc8gWnOHg38v9i3RtSqBuYA1HVKN0xTsQ2JiRSdg0to5W\nYlEvwfym/ZrvNhha/LxMT6QV6GB9/QoQAADJ22ypWGdc4bGur+oVP8tHWUc6\nGonjhSEabWq4o5+WSiLC0XEBmLujQ9P2lDCiDAjqDirBG/qW6USJDprm6W0D\nmA17TGWNjYvPKii6XP0xsGQ8qHGiMu+wywtb+ejAAIk3T9wKVJ1Z8+Uqpz0K\nwRZhTdFD9OOmXgP9e2qEgmCHt5Yqw7NFyvOL2AiAIIMi1AGTCC0Y96yj/7qU\n10ek\r\n=kKLP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4Yw727MLk7sy1k8OMfbYG4ubH2F3CPXc0JpKa3fCFEAiAzvoKM2V7RjAD+GO3M07faVvWoxcFcWXDqE/83Hvi3VQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.d595e030.0_1627073586988_0.39238262495722376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.fe7cca31.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W2zHBApNxf0I6HpBAK5Cv6qHb7xPdjmjaHS8p4jE+uUaictIuvHrO4hC/lQhd6miU2ZOAkKEzVFZBeIjT1u3jg==","shasum":"916495a48a4be7f76b6b94dca5e21658725e9a59","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.fe7cca31.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsZCRA9TVsSAnZWagAAJSEP/jBuaAUZ3nZlPcPNqfBW\nUuzanhFYrL7ijWEv9H2ldUJasIbNJdpqPD2WUlxWR6s44Dsz+QmkduLr6ZRO\nzepimFOMC4UgMjWI03QdSDu8jfoI/QR0SGJBNbJ/xfohNVckYd+tavC72QQK\n2GcP7NX85aaxC0DMlCeJ3csmfQVsayED6LBeHEDGA4z+q6+toLyt8MyRfioZ\nyBYmgQFQoVYc0OFCzP52FV7UkNdEqpDB7ltpWAk4AbHV13HpSyl46+h1d8gC\nP0XES3RwiezoPthloMA6r/iyGFHFHWJmWi7q2eEY1NHWg7MCR7MoJ/YAIQeK\n2sgAdMFt6v9BRoN9p4iug51nbtQBnoWUem/lXKpl54Qjkkaxh0vA1x60Uozz\ni3nnpV0rHfuawAflHBsXoxhbkHEkGbs6lG+Why0bUFA9y1sscMMywr7VH3zW\nbRRArf36GdX5sRhVGwQ2ySnnRLCFQt3o+QOZkdQJIiMwfMPQtXaNbhrEaK1j\ngYRiJoCdMa6LJVvghssk/YDih8DkbD4dj5gHxMfz5gnP+mvsBxCRK3pkupra\nVvAql0cP2znaTUoOmMJqPGwTD+1P0ku1BakZrJ++Pa2WikS+8byH6qsDNLIw\nwAK5p25RzKYrZARDQmRLTp66Ni8H3W1WkHVNXN55kUidyGOYmJDvGrb9/rn0\nygxN\r\n=QyUP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLLEgrlmtONKF8Z8XZHBJwo/qdmYeeTqOhYpsAOOZizAiEA5HUCX00Z2IxkU1fQGrfTc9pShRpUloozWXyaykt99H0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.fe7cca31.0_1627077401346_0.8275124462112091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.fd9da483.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rP3VxTP8Z/FamOlNRlQjCDDFtnZDtyjRL9iytXAocyl095F4GGT5sTkf+JuqLq5ws2LtKLKyNkjrjQKJtjD3bQ==","shasum":"e122e7d3dbafe57fed69a275c0680c4d200e3c71","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.fd9da483.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygdCRA9TVsSAnZWagAAwT4P/0fFVm8tHLBJyvCi+MYV\njo2/qKdjiMQKLQh0nDQ/RRB6VqokYA3WqY8uxDXzM3TJuwSY3RkXwSEAdzEM\nHsqm4WHcKxrEkmvL/6Cst5BQtsWacs7JScmKQqn9dOfyl+iTlVzPMMlDRAlQ\n41SX9DhSHZ2vAjwHvkn68K6HWnbz8xUuKOpBBRaEl4OB1wawz1dHn+mAkGcv\nYAHc8wQB6U9OxuuL2IeX7IFf49jL2NAAis4yFoMdsFdCL5TQoOuL0/PYklt0\nVwgXvFnzOfNQT9jiB9am27/bi9sLzrzmGP0RewjsmvM0nDu5FFAAuPY+7ULt\nI6DDNjov2KFOSeCYj/f35k1tIXe4aThVFYiD7rMov9003HZ6i6znVWtLnPaY\nZA1HmBxTVWGDtCrx8S9m0mvJrqNsa4h791trLwuRLEtctImCANbV3RqPt7wF\njeFl577xOo8JO0IYaRAw4sRc8XD8+OdLkeH9XKYPpv5VBQdLIJT+/j+i2ACu\nOi9skT51KnGdmbxDP19wvgTNo8OD5MuQIRN0KyEBZ8LOE9bfa+U7jYjoXpwD\nxlPICPAjamEXLf2MQPlK7ejz+/Cq/iWQ3UqJ2M9IN6N+v8/b8iqMV5OhrGYz\nmmHILXuPqCd0xkSGiT54XJOBIQCL+kE44vzKG+jL/N22tHREvy3ZoDXvfHj0\n2UZu\r\n=11CI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBC8ebXgIuGkUQkuZsR6Rcg0L2+sYiH9dwz5Nld40YBsAiEAvoYBXSj6NoyprCfcyaIuDIkiVjsbxA75HGrV7jkjhS4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.fd9da483.0_1627334685153_0.01568506749115195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bf9Zr/5fcoZx3HTnFhowOZWd4YHmp3YpcBrUqyY1oCUDu7S4pWFmzPBK1g1gEU5maduUYH+S8psJi7WNkkSH0g==","shasum":"680fd03345d6b8dad4ef09197aa977255bc8198f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.8a4c7e06.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zquCRA9TVsSAnZWagAA+3MQAJaw6lYO0gX+783ovGbP\nUxHn8WrRnWMgWkQPmU9rzLhetMRk0lCJ7Y0TugObmymV+adXZpqHr6FKm7Y/\nnJHo3lFLZ/bJ+keiZn3xvKGMOkvSpQiJtrq6gScSoYML8bf2lDItHvxbZETa\nnAyDrLGOInHERlag4pw+qix2pDESHCAyNvIK2ORv9b4paq1b1d7ZcOnD8Oz5\nj3EvS7xVVwKeX3OVui6cHVFl/3cWyufZ+u1QtjX+QqFhYQ8czw2242ab1rjM\njmuk3SYzV4S/yAHDk0kkY+QyVJt8vhV6R0nbg+wGXpf0UP28Eg1EXWlcz21O\nm4+HSmT7QUuZcqr2qoGmLyj34QcasQtgqKho6mMsvQUWemKUg4/hrtAmCNZZ\n83nYS7vdlI/m035PGfnmp/9j/tN2y4qs5h/gjVwUlRqt6UhOZHh02DvfzYfe\neLfiSdd7SXbHb/TcgkQ9zjL+8oTtBlUd3h0y9CRKr1O1UW7b1vgz4qCz3HnU\nZGbwAa57uWfndAlucn+5/6Vn9Ig8twFA9RkSpI3SZN8odmp+iZ8xigMwSe5X\nEIF1GhSNGkKch6QXiO6O3+t0jJRiJTjVFrC4jMhy9En2ZnRN6ilyqaROAY/y\nVefioVNWVeVcPtyjBzFyGX/jrMugR5YnsCvpRd/bBXdLsBvyoSMaMcnrLldN\natw9\r\n=ByZp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6u7Gs+icpXVvzP2IZuIJkrwC49vqUc0hl6UBxPUT1tAiBWjVdzjT8orOnqLxM5l1EErZlf7DEFgYnaiAzFYi3LDA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.8a4c7e06.0_1627339437862_0.9579056910397097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.5b395fd1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ka3z6rbzSnkdSrkMMpiujBAG+A5/AgenaskAiv1CFA6tuR+2HzqQLuOrv2+wj8LIYImRK4/2s+rgKt2FvLaS6w==","shasum":"44555149d3a392b66b7903e6e484f53a4c540f13","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.5b395fd1.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5MCRA9TVsSAnZWagAAQQQP+wSZ9gmRa1D0uRLAGw4n\nviJruQC5QuDIYV6ohnSBmakSdOYWRlI0JsbU+kpTqI1kBt7ECTXrr3HasTRi\nLAd0t7XueMcRqclAuQI/jIQr7u/S+5o7GAIL2hJ8b+uJVDz43uSdQ0E9xnBn\nE7gjG05JIMu9mtYcPx3jyenHoEW1PrhBwAUVHIKs1gWAR/u6cvjGoPjthKBr\nkxRA+b8iMHawsE73HomHY6r2xfNbfmrtCVjGFEg2ZjJFYJZt07NVPQHOtrWe\nL56kuY3iHEe84ZdWzgAU7SMAWwbyL7mDYNwdPAPC6UOQ2HqIIZR1D/cpdKvv\naSgbuj+AsFZvppdEtka4MLDqHG6s0jZWmNk61UnEm5y+GXEG6lq2UCsMoVa3\nOp+ummIhdGuiBayvLuQR9Z4Xly7dwS+I+nYCDMliH0y7vVlR5iby2ffwA+4L\nXdtZj4urdCT3Oik1nIE5G3Spw/QqzOPx2ByKXD4SS3HhXhYUxYt3+nvRKZCM\n/Zx19O1d+1qx8vRkgQ3alxAsAXOqBWp75LdJDdA+Qdx8glD1oD6HNsPVaKFi\nzmyNE61Biz+xIjQvTfjONqwNFc2fFFLsS3DMMKDKZ/V800pXrtxVpcqGyvdw\n2xC3nTijV+OMm2deg3e1CrOAW5HHAvfF97/F3S5ce2gykt78WGrSCCxwjVrt\nijnG\r\n=cKX4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKckFha3vVV7eGWcOy0+M/diIV7Of9x0KapCBUQmP9xgIgBj1iLEIyNiU/uHmjLKxd55sU5zl66PT1kF0eULBtTmw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.5b395fd1.0_1627426379906_0.45524922670016177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-audwMZLsolddmOj9glo4HWgia9TzK8b8YmKiJBHSqzwSUizQ6zoXTkc8pnpJZe0zbw+N+E8nvh460sK7o5wteg==","shasum":"b2d3a0392712313b4d606aaeef73a06e55749eb5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.e5efdcc0.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJHCRA9TVsSAnZWagAAEpcP/362YcynpYL4Ax5MmoYS\nXLJO07s3IBxpZTN3KMTqX2A7utnixD/Y7VwwfgFKWtsLor8CUgVYKRSA7LPE\nerXfNcW8ja3z9Z4bkRxOjskddPXAO1m7vjav3WnAAusFqsta45OhHLicSic3\nvKdK9k6PlbTlnbPHi5PjFG4rxYRQCY3FyTMOxD9VDavwh+WkCUOxfvNzPfS5\nN1CUiakzKtl0+t1wFKf97QCZ/n4Yp+i84iUOyhrptV2/MwdG7r4Rg1qYUaqp\nfZicYi387T/AdwPpnd7OwvfCjcRoEYdH0gZzuVz+VjteZ0hmUw1tD4ojNgLd\ni3UseqM8EE0XWKTlenK0yDBaD8gZ0EPE3PxDhT8k3DNFVo74t/z9mdtxiigk\n5FxZdR3L7IGCPmP0qR7bmjNAWhIqb0mikwvutm9lOUcPdQR+smglvwk4gxB5\nGDZW4b671rwZxqMO2q0+f0sDgRp9Ng9lRG1mOJBXWDY7LS7qo2dH66SqLVdW\nzYkh/5ZQjGmnlbmh3hWYAbohkmdVBlro9jNCB/5hH3RGlqI6kOUnnC9oXo8R\nAOKKKCJKXxbniPznz16y6FGgfyvTMdE9juUdGh7h6Rz4khvrQBmCjOObkXsv\nu06Lcqopoykmqn66wfBJQBqyX6cZpUcGxvKAW00RrP0WBSPz6vUb2onyIxEV\nAvee\r\n=JVqL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFE4Q5baoeY6I3o2OJv1VqBqh1YqsNh7DJSvi8kZmUc6AiAIoZ0JrpQEnTK/eMWMUrzrBXBppJdHpjKVbAWBXTHxVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.e5efdcc0.0_1627492935660_0.3757880915686629"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.ab310900.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ab310900.0","@material/top-app-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X6zR0W5ic2YaDG7ERZ/WFo/9ukt/qHyZzgWMhDPZ4uIbJ27EktMuobrTAdjTAqgY0Jkrtdw4vbkUKw4YVp4NQA==","shasum":"48931993b2799ddc3139d20ed71836b388f67fa1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.ab310900.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbw9CRA9TVsSAnZWagAAkpcP/3XQ5YXo6c5c45XOKnjl\nsMBizhJmIVE2l6jPuTuHkvWMQ6lJRa/oDqzKxEPmJpdRp0SnxHEoP5cjDTpA\nsBW32UOCHZZeXbHaPOhKULgUghjSd0YcMDUfSWC3KR8NYWFRx8x1WR/XbUCh\n7aGI/G/5wdFjqJRneY42QGI88sLo64aTWD9JUuDuathHn0SzwY/3l5CiN0c6\neYC/sJsh4pD4AuVTaGt73N1A7dJqwWlMafAsD1dT+4XlwHVl83EqYgaAZqs1\nOONT5GWwqEHM5gU4NhuFbbow8X62kiBep+MBkDxNP0GlzaYCmSzuJlaoBRrq\njBMejfSW4bi/rxoZSDsf3uFN9LVipKyGBQ6Tabgf3xQeyrACrHydvt7vMtv7\nt9k9yMBFZ7W5PyvyDWu5DxcZEet2n1SR+dq1RdrGupBXj+/L9YyFEkOgu/Fe\nrL0dQam5OA0qxpIfqq8wdYikxhNqA6NEDehlAJNS+MusXRiLKf2ALNNAZEyA\nCBy50O2BJAHm5DwpMGtx7HjUhEmCwfNeX7juXoZ5DQbbAcBoRhlTK4Noiu9w\nGSLs1PHlcC6yjGNhwsXxGPedn5jvuBqmTc0dh4a4sL3yvre7+xY0Oe7vBC8K\n7asPhWGMk/vhNdk8TNeAnDRwPOdItqs4bRLueJk8BFIY5yNQ5HltpGpsm6uV\nDgra\r\n=qxVO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJp8nsAkEYXoliDZ+/9bglUnw8jUo0jq4D2fK/98sbMQIhAM5HrWzJPG+GUXznYp8RGY1b7j28TDO5fKijJMf07Kr1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.ab310900.0_1627503677700_0.758022697468381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/top-app-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LmjtPEPJU8zS3Ug6l0fVsBQwlxSnpUv/GNy2LMFtxb4jyQJXiwzurTB92/aQre3C7/7+NmNFUWEaVFW2Vhbj+w==","shasum":"65d730608faeed766022aac0f842d255de75e0c9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.21dc9bc5.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1XCRA9TVsSAnZWagAAuewQAJ32QhX9Z4uiv7mqf+YE\nTjcUpou6P/813FvJLpupQFj/mbIp6YoxtTclHF+Fbo+hZVDDCbkadyGIQawe\nPNPuuae1UB0Qx8rkZe0Oa7N2mQvieVYqpBJOlQKPJwzoO3thkUXXvTZ/KoQL\n4WIJHamqPaDJVbH4c+suSD0adxovyB4KdBPz4Ui9qPd4CIDo+KudoQQJfVMr\nqj67uiPdqpp6CECYjWEAr+xnE7DPVvOZei4BLK0Hej0f70GYdSZpQ8FDK+xr\n5b6WrSTAifjzadDLysppgun+HbjgY4OurGYYBIUJBel06WTSPDM8POPbzIX4\ni2t5bVkwrzaN7MeucTaWyUYqySZBu05WxAUEgc2grG7utepkFgzF8s/Ahv26\nPl1DTYEsgJpTr1uWzKukyeLxs3nLKOmuPvp0VZLUB0RJjp75lppdOqstg+oA\nS78EYx66uHGtAPZgtz/38glXFvMkFS9X4EUvxAuC21KYiBxSVvE4jAo7sXLu\n0yWVxeoqzLARRJPo5+lSiA/PrzJjK62jLKlYPHbpIZNC683roov/66mszBYI\nVxo31K7axBwJkR1RgFJTMkR7TVQzxRYjekQj+jJGJ1XOG09cAW4Vpoi7N9L0\nOcSvrb3SvBe7YTuTTEIlpGo6wLE6x95eB0clbpt8oG1A66qqLrgwqk5jAPOh\nUwLI\r\n=d55N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbFIvUcpmcSFJhypzfBA6E9Q3ASMEqPtuf961cNYgZcwIgKcrl59ln26TxZIR6Y1oNyoN/SSh/Vc82H1YFSp/78JY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.21dc9bc5.0_1627503959266_0.3916747044843014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/top-app-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k53le/rdNDgjW4RfsXR3BM453SePAd0cLSCNjH8LonOrotrysiAvFOHASfJLWQR7C9X0mJKw44Te0zEqKpnC9Q==","shasum":"610d952019899b00d31c788fd5e9e287241c6719","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.68c7fe5c.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQQCRA9TVsSAnZWagAAgjUP/0uXwX3UV+H70UssOxtH\nwREB4a2PdP6AkVkloWw+wFurQgCCQyjjiBUx8slmDHR3tb90UGeAdmP7DLfu\nN6wUnxYXFLXFbe4O39v+FXVhYrVjqNdvZIi7vgvao/PzZi4IcPjhTmESH35F\n6zj0B9F7nfWJkqGKpu3k0DRsPs6KOq4SN04p5N2nIDCtMWize8DmkYLMxxM0\n5S1h/rblk2LiaVqwSHwL0W+UE44zCeCdhdk2nZfiRqUlK8F1GZjS9K00Khl1\nQ8TG6Luxjd/8jg5eHB2NQ1akkKJU/jsP4TWN2/aTgBgp+UwZb1pI+Cj3zPw/\nKoEwskPfeWLSLKirgqBruCMZkIBuegYdcIhUH8Y5h+AcR/FWkscY8C9rWTzF\nwX9L90gJoBBgH9+5IXiqtZMbJasVutEYNKC5yjEESIJlEimUH/OXxLHR67Uj\ndexHJ+WiW3io5+oKY0rezwfH3o41/g0kVmn15/inWr7fnQquJX1rDWKp7sxC\nNn0coaa6kecaC1i7bphRfsSFsfo69sNccXTpYAtbQMXOrkYVKgYUl56E1ORf\nbr1/u/z1gDJO3RT1QVTFMsJaCoxfTuJQ3OSUuPpMFnoOZ5X+g7WmmJTy1Olo\nckb+jOSFc2rlW8oOM89Y7WTCAhyJ1hN5CdCsEBu9v1OM7wNbMJ2/XPJP94/Y\nkYKj\r\n=a8P4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdwcWQnG0rMbJ/SK/3je1VEd/KpkY4HQwl8OVyOiEO8AiALvU6qRuY8keQ9StfoUFQTpE0tIl7HNFy4iPy9ehkkwQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.68c7fe5c.0_1627583504117_0.6686100090908531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.aebe39e8.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/top-app-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jiJlIQd6Aigv1RxbZN7eslTyI42i3JoRqFX+tPnLzvI+f2E8vXvrNeReuWBi40cQ9LkrYlti3u/l03dUoQY47w==","shasum":"f283483cc7388d126e48396e8b9a85f5f749497f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.aebe39e8.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE9lCRA9TVsSAnZWagAAJdIP/jbsAbSWmMY93d3OBSBa\n1WEXIzJ2fff5pPbAhNd6kS5HvzWFTLlRhN2ykAYt+kD/7wGKR6wPGZa9Cwsb\nJYR6LCnisi6FnD0rVSAMIvSXPzcl59XlKOO9WoZqL5p0yqb1sf87G1vB6/+v\nz8prcr9O2rDloVD+L2wlTyn8cMR0tDOiCtbW6pvrY+S7a0Zw/ztM/Q+MCRw/\nagjeq9DQzIoR7kLYy9ITTokNckPzwFkWgZrKjy7wF8s7+DPegCVGXOXAfhuY\nqAm198fVXTmMsOOf0Wt7wqztRJ7hAJqdL2DnFjBrWUoiVJrEFI2bwwdQpKon\nYAyrRSqHiPOm5HH7iN5GxilwqCXob6+4QPz4YFu/DqeN+eXNwivqgC/OsqD9\npo8xmWU7c/a4gyEwKLs8zSXLr0CW3HxFM6ezizgsanl77RKSqUjFVdro6+3a\nMl7A5e2QEqExABjw57Pis0AaM3OQ1oGQPWd8SHQKhkJ8BILWiER9Cy8EbLqJ\nlMEE7vUVpH1r3mspNWlBCr7b4DsyaKiyJDpGPOg+g6X5H45soX7t/2a+NLl1\nu4k78ExRN6J2grQXFA3PEZk4dYWpkm/fLbj9ZunjSxgitYRD36fITjNf+ehR\nvjG5RvtODpmXrQC7okaOBFs+m7ec41Dsor9y5D0EcmzKvSzG0Vw7mn5VGkEa\nmBvl\r\n=ob82\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp8hPikpml6CvveOrbtfbiXMtG5m1b3hkelP4sUnvT9QIhALevQUd7OLl9PpqCQWUy2nDRycDf3eAIlZgRiNqsWaO6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.aebe39e8.0_1627672421416_0.42974450189523394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.ea889c69.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/top-app-bar":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.cc5377458.0","@material/elevation":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E85hnGqSvG40CSCPWeajaz4v7DrT/0+xz/Rt6XwRg6YVSRAvXFYb1/fIOxtQzsacQInnEuXBLh1C+DuLaHLm9w==","shasum":"5a8bf797770c1fe281055b55a2a7c4ce5ee98150","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.ea889c69.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9MCRA9TVsSAnZWagAApbsP/3j+Iir420XT1BlU53ae\ng2oa2wmwuQz3Q7GOjecHVDPmwt0NT5q4CR0WAUeoPKdCsSI5wQm4FahakjJu\nJ/bCVHe3Vn4wGsp2xCvESGTmI60f9NprExESzBEoTCwSaX+MWTuAYQO3Nbxz\nr8T79aHFmsDYaFOg93QZPbYhpFGGF5X0wHiguvgTMM1RPMUsMkvVqfpnjliH\nMCXwhkLFaSQhj/QxnMff29KE8qgwSgHzhA1oUBASRdaD/A5KhF/9oknNvNa0\nOyakOxO/yuAgBSlN/3txmeE1fyp0qayR18K21br4s/n9UjMsfJymDrQGsAu1\nM26AxddCXHUzCQunsiNv2D/p8SQ67t8LsiChuTDHSuA0TXUqCH/ZPROrIHWb\nhkAT6VC0LAZ19R3D1RseKq3Vubh0nu2Pvp2U86Q7FwbU4Zb4gQvKoOz9Qvd0\nPVZMrVIGcBfEh3WkZtgJ3GVvk7qq7PSWwCNHrUk6QpqBxakB+HitdFrWvEzs\nrmXpolGrwSrRTUJFS0H7FAl3I0Ux5Z/B8OwffD5kAP50Xa5df7/9RFBEjrmw\nZZD/cTZqB6AuCDnq6mq8tJtwaEzXcS+C5lQtbQhjZMjd78KqTSOzXkhDQP4k\neTAFaBYTNSCfDuQEzoUcJGeRh2OFaA/Qbeg7moE9t2m/QrH8eF+Yy2n0I9Lg\nMpps\r\n=F++Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaJ5tBZ0AJfY3DEejmo73ONoOkQipV3hULtSq2v7omWAiAbtd6EzzlrC4p/sjvvnEluznBJ+ambUk/j6eCjnjeTfg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.ea889c69.0_1628016460465_0.8254935957136158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.21918905.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21918905.0","@material/top-app-bar":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.cc5377458.0","@material/elevation":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BOV+XdRA6Bur3QLzI+M30yAmjntezNjBSVdfis0mZ52WL0rGSBjUnblFK5bjIIZu53p03q/AGAIi5zTtJ2wVqQ==","shasum":"6e2606a7431c4ee33dfe2a6e2fa394fcd57751ea","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.21918905.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbGtCRA9TVsSAnZWagAAOP0P/0Zsrh0KY/wQhxyYyWGg\nUAcTDXtVelQtedJ2s6XT46HpVAOGPDMtIRPAfCPROiRU9Z7OlkpwZ321mVgL\nao2YcRg55RVjmetBkt+CpGEp+sQKgrxDFdzxdfxeBrc0rz43wASdeVH8PzS3\nsWG9CuAHQ4c303QBiFgwGEtZdlVX8uQmF22n4pfFcPWstwgotGbF2zuYT+l1\nvLdNG/WR4Ivr8IsRinSCJqZpVvmB13JXC8RqkiEluU7php36nSo40tLCrkMC\n74OquvkXgqoGhKtS0g0HS7I4fGsIXTV3ZwkQoIod9KvpN4nzcIIao3fm5cCG\nzx6Q7ISGwuckF6fPuL/hnArRAOfblGYHq2ty/lJ8wSett0MvDj0QqFAKOhsd\nr2ZS2wjHeOls5pOphxIS29jGu8D9/bov934XBnqRksx8ynEN/PylOvs4XLIo\n+NjAYPY1IVfRixCB0U1vPRC7+g6rlgECqu5wATEDIuRyWLO7mzCDXQQ9/t8W\ngzz63P3ov78VFW/UPzMUNv1SyW2VCFAswYiVMHlAgRVQQoJfp888TPw29bo9\nUAqka95FHBcx5apngGRTBfKM3sX645Q4teYO0qmzn2Pxoz7WxHOwJHuTp3tf\nbfzl1nWo06w28aWZOv07D8YTk6ZwM7WBdDRM7iouRXHLwgFjw6iSu3StGXLD\nsPQM\r\n=Yjd3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKnJXowKu3EkztYb00aAgFftJ3A4Skkg4mwTJjYVEOAAIhAJVp/MnFpRUm6nnyyJpByDr1x1nmKek4YpHmORgkgQOd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.21918905.0_1628025261341_0.7834327082176298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.193c87be.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.193c87be.0","@material/top-app-bar":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7c96e6b98.0","@material/elevation":"=13.0.0-canary.7c96e6b98.0","@material/theme":"=13.0.0-canary.7c96e6b98.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a83HwyvuLWAioU29SZedYI7vqIFmWqC1NnXE8Wt+IA/JMHsJosM1zoENAI14G//pOEfUiOu3pWn9xxro5m4Tmw==","shasum":"2554fede75d3796c3b370bc618a1ddb1a8fef8d9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.193c87be.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtdkCRA9TVsSAnZWagAAJH0P/3mAZeXk4XvLEaF6Ix0L\ndqudxvzmQHO9L5z59SpalsLfSANTZEczc83lVsGJfsHqYoWM5ehrxgtD9EfY\njMikkXwfGmBd2wYyF7fxkJw32MleT5OGdky8Rsc6jywugY2abarhHp3wwdzg\nAsgQsfV3K7UbIm5aD1bjQ2VBDYAwrbB82QlZf9rMxn38oaI6NBuDoG7Cm7LK\nHBRQ1JQibhQV6iTpkombWe4miQjFxv3HfIXNBg/CkekUXXXkW4IcVVCwokCl\nNpoBW6oJcOESbgFVWE5+PbtSdx7xgHv0IDk90kiLD0eZFBtHpgiLm0Rwnrhj\nETxcPmeMgQu4Udas73OCRmWb6U8xmCg9dgb+z4GpcJ3Yap00A7cPhk72GKio\nDmjEElFPTh7LS1I8W9zgiT/xe0QwqqUx4CPCf1H/nzcvHb4MB+OrB4G9ZexF\ngp815q+7itYXx0QLP8WJY1V+RQCABwrFesw353MP/0uRVYfes8+xFXwbniYL\ndYLbtaxfgaMHaihpMBQPYI7kQoBtmR23JeZLxbvjl/DLoRrCohKmNx9ULUgw\nn57RLJhWeBCgbxuZP0aWpftFdP+3QYAw6izoammUKaG95ZliETkrnP9ETx+B\nTOd5ho4cfs+mba6UV3stPDKphEJ5HJtfxVrSX/Kh10pHXVWziDLCGl5uaIYC\n+wDh\r\n=CsYJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0aXOAJGzpgpxcUUX+06Wfsz1DXFnKKY/Y+6bP9kdqfQIgYZwODdtTjjnj2pNjK09iSE3ZChDWpOocwd0UXU7bnbM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.193c87be.0_1628100452517_0.5277257225790677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/top-app-bar":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.3dd611091.0","@material/elevation":"=13.0.0-canary.3dd611091.0","@material/theme":"=13.0.0-canary.3dd611091.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cLmyRCwTpAGNbzv9Dtf4HIGdVNfGpdXxcv0ZIWS9MJ+6saOCN0kBXE4CYM2W7kTPHOCDfXXq2BmbbBqYZ24+AQ==","shasum":"10adb4a2716ef09c9286d0bb734962744eee63f8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.6fc52d8b.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCmmCRA9TVsSAnZWagAAh24P/jus6tEJJKHWZrQOkbxY\n4AdYH4D0Mx0DWUpPxgDFC8UW4JT6eBaosFcsp4aSSx55k25RevwYinu9bvhV\nXhmdIexDWTL9wxFqBs2bINbI/18kbDA/l8pVcR1wIaL1uddfcl6o75yzwRnD\n6zxdMI7VhrnFetFlTyx4jGmNbAVi5BWZmk/xxNWa4CaSefz9edfxBnQS+EFs\n+ndigHIoA+IfQM/2Rln/gryGXzWMn3W4jmNbe1BMPvc2GOV9nkXhtSPTum1m\nydAVdOlY5FB9KKDonllx8KlZAWYgctldwYPXxYKgFxpoOAfVZaX53X0AkMwT\n48mF519TapUkxUz2tzdUii6Ijpt6UE6f+VM6wZ7srsZVUNLt7AVj3yic/4To\nC9LY6FUKgCxI7G/5P/6huQWleeKiIx9nUmE/Hh66oBg6EQV6bOtBPT8xjQob\n84usZJTDYG8v3hdO8d7nHTdOMFkq49x46vzCO5FKH+2EJ75wxOzfSRm3x2RJ\noLL1wHaOV9vy/Nov5VO0JyWIYCC1a1n4VjG06i5LK4UKXlGztyI/vbuxV+3u\nc8MPOMO5ZuWm33jBSocppqZDfXEm7ZxT7vyGtTaT/zA2DAsDRQd0Ags23sxS\ntJsbNkibw+4iXgkamguJWMOXuMdThedp/G4cgnPRvmEwwfJ8iljLl+/UWoaA\n5C4c\r\n=dXeG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/CpJCa+tDCz2E17n4NauVkaoirTRQiHLithEu2rlczwIhAPZjg65dVS2GTpQu3Ea5BTYRUJZpTqN8aCDsvXYCkUla"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.6fc52d8b.0_1628187046349_0.9849428978046539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.e2e9777d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/top-app-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QmKegW/Ly98uEBvorlQayIJc+OOTgj2T3JhzBRfYdMQLAVbNrlFENv2XXu40jVxJ2woSml490OoZRC8/8S0h9g==","shasum":"47b2f1988609f636c357da37fc914ebb85f15898","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.e2e9777d.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGp6CRA9TVsSAnZWagAAL3AP/iK8yy329gPqqkckZQEg\ncjqkS+lIS+BT4SwAUxSyJ2O+7oOzmGg75KZ2Fx4bAh5nV0awuv3Azh+RjHbW\nDnXXVhX6TJedndevttbgz6PnjVi5kRzVkkTXuxHp1afZwQ83NgPrZP2AI9TP\nYvtotYZQjRCQ5Y+NYXmAC2Mu7zpdPHzbVlLEHZAx+hJ+999O1CC4aN55EEdX\nUEfWmzzt66wxqjprAxwGgV5HrlMxcyyeXKZi2axdPQqw+nhdmQwfT7RugPoH\nvEqJdOqgKmzLArt0ePKkrKlFrx/GsXy40bJikEOIcDsEk9FiYvvdYTX7RLG4\nSQoOi4V4ZaxFapBXaB4K/716KDUh0LIXvQj83OjAtY5IuHb42OIttv7oUt11\nWpzj8EsPzThVKP7hRrfVdtzoNQGbRuJtaf0/Kzg/zSj6LX6457bAjqWsDopx\n87BDVD2FA1pVh+SmfkKpQBgA3etTm7kTXhSMvvNMwiG5zP2r0bx1FSlK6xwG\noKn8ns8NIBZJi6WkYi6v1Yzv48xgUHgzKVg3PS9AoOI6Lsllfpc9Hk7CscQv\nVHp1sgTfbpgVfW37U6ENCzieVpAvlVOpH0H8g9FekN/EmsuU9J8pUB6mAx9b\n90xZO0W9uLZubhwWI5Ao8ZUgiebkJR5nP/uJpJkp7gJqBWLq4838TN6ZoAEj\nPMrK\r\n=MpOg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8XMP24U3RgRw26k0DKpPU69WQbjFzZXvliyteyx0EtgIgFD3DpJGPzbVeWhO4IT20ZVoTKqptT6yxgNLpAmNnCDg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.e2e9777d.0_1628203642373_0.056394042735954164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.72ff1e68.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/top-app-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pRCO9h075hncsHyxxhXp0fsKMuC3DSbaBr3sOSxybCBP0u1q/CBAVMpfFE7mkzc+MtnomcxOxsKC39ipslfF8Q==","shasum":"6978560d2c4c9e4063df95025374845d2401c2c8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.72ff1e68.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaAsCRA9TVsSAnZWagAAPpoP/ibFACAS3tjN379TuN3O\nNuoYINLg10/6PSXTJY2s3xLxr7OTaq8oD4/8FwPKPVVoItTcYKYhWqFl/8/G\nTE4dzf3eoo8NLG5zui2vsZ0YAzPrzGNxt6O+G9LIV5uCBFvJNFEZfOWII2+6\nwiyMJBdByWNgkm0/9NLORc0drRCGCJ8DZBFmMowe0XHif/VEaVl9FV4XY/Jq\nl3QFhljBTYX01dr1orJmAC3D8/O3KdUVxD5ZLtFbxnvLBPe6kmxzsUCE8En7\no+sHpwPs1D/sHoXfB7wzaRBLWv54BpJl5u7iNOy1U0anaoTCM7GUbN7IT6Sw\niGAYUpPdyxcTavtG1AFDT4s+YIGXbqd18dRoB9s+gEeZsT6DQiKXy3hGPnwi\nHPBush/1wKmPpTyhYAqBZSAWerkLe/t7a/t9XHS2jXyyvoxYoR/fUHLLdrEb\nXQgNDrHLDLZpmpgx/Sc3NWoJAxJLL/Ux6DTkeLr1NRf4yS4mw+Pxp7WdfODL\nmr3SXckD9vt80N5olP6MHAOU24MbAKMCIcDMKpkt82Y2wmOJTjlJmcP1aEJu\nO36AwldBv+0BF7QAo55gJ8gqOHxXJRj2iyUcA56DyTyKaU+bVGIQqoa2kDiL\nQFc3/FaMDMB4tNXWUKRA4X+7ToGhSxq3Sw+5084okdjvO03dEVw4SOEKKWFs\nflRP\r\n=yz21\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVUNsR0Wzv/shxmLfJyKfO+3go6bfiZbP2/phjYRk5uAiEAtOqZRmGZkC8Ppav+D2qwg5AYK3VuRvshf9mxrHm1qig="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.72ff1e68.0_1628282924142_0.036044004838341914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.c527e93b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/top-app-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Pj/pcT4UNc3M0RbqZcR478QpjhxpvG+BHKRM8lMkxOle7s2lNFRRf2adyVbiv4aOMyPFqFAavD0wUovwx1CTWg==","shasum":"df56f8769f15b892514b5e35a61ad14efe9e70f8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.c527e93b.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaU/CRA9TVsSAnZWagAAh1MP/ArS8o6czDdvGVPPSnVi\n4bbMHFx5PvZooBaXLGEdtc2OoDLjlXSPx98I2FHVWaUBgMKmVda+VedJaG/v\nlbvYli6Dn+BxeWqUAmSYoGWJrfLVLhwePz9K2RiOPsUlvtvTj5iow0+yIppG\ny4ULHwUHI4pYxpeQ88HVJGxs3OGWgbVXTruL+iXfoYfXgKxKqNjFISfPZRqR\nDFqKEyEYbxziA7vuoqh55O8/lTcEaS78h7+fYSY0uW6hS3m7XrKz3SC17GIV\nFtNUN103/jEzL5Ak2cbSpvJjEKUvYFtdpz80LK2l7GCBtkse/xE2tqCsn0KI\nZTBzPTpIurIWnCKCR5FdmOwcPUhV03CTEMDHz3zWu81wheIXgpcpXn3MLpWn\n3Y/2K7ZgVqIHrBRkwsAcSizd5t/Z1xA1tfvGgP/pXUf/aKWkZvaD9oZvT0Ct\nYzLgWATOYW/abeUTNToT/H3Q8uPzTGgQ3OEbGcMH3IvHsqLnKi4IorCloU4r\nS9lchvoozfGDH3STZAfJpr/HUDqT0FId0iFqxWj+sgxhM3CljV4HfWCrkQib\n/++z+k8iSB+21VjUCrgpBW9GJaQ7kEVLbeNAjky7apQZpSVjvPUWIb207KNg\nFaJ1SRDh2FR3Y3MyxoK8FvCOGy+FxpnnkE5mVlYmiBj++3UTyqf1g5EDdGck\nQ6dG\r\n=4z0w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDyUbsN9AWOMXE6/zBfteT+pylnCaXFA+L2+/LRRUp4LAiBsOmizcfuIebBfYtcwr3xAu6ktT/h97sjBfFb/XRMFFQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.c527e93b.0_1628284223708_0.9883517987493646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.78b1eaac.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/top-app-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SlilPQtjnmoGV/V/wkQM3rTPeAEEPhgS//LiDbw4hnfbSNZ0/+Hvil33wSVkoNFU05XiA55q6bw1EMMqkXMsCw==","shasum":"17f15e62c64f4759f23bdbb123ac7c92c3427c10","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.78b1eaac.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4DCRA9TVsSAnZWagAA2YkQAIuL3gxyD8pka8Aj3VrI\ntVPP6HeEdAU+0c5HgGi5XM2PhC03Gw3gJJGPBiC6Sugq3emGJvZjHrzsC5hO\nDZGrHa5Ttx8YJ4sclY2mAfCQB5o8oI0N+0nrSxbMGvFExwDvbdlLgAThFmG7\neGURUTcnRoCMwgilSrJGfcAyWQ8uh0F4oPHrySL6y5mEjPSbTQPE/GxDEdrB\nor8NtnCmHAAN0z1Z0URubavAeBcnmYRf2ctR5LIlsWVTUl8PgQ5o6VyQLWxf\nWTOf0F5cEHhqTujxBImJhENMSXsmN5/c/xdQbUSxcv4GV1LHSfNRpGB9rcK3\nalBbnjfoH3drVYIitv5Z7QdSqABmg1RH5yr8H2FQcSpAsYX0MUba+rFjA6VW\nvNAXYMHimBldxjVwu754nV7aqyEJcNZpEeylhB+rLUGqPO+yWvcyxvAEIibu\nDWDqqKmApSNGQnRJp3VDgFzzlq+PjubxQ9qc1j7cz5vU1rBWvS7zd5wFcBOp\nCjIorNcHCjUvXQuZ5a3aLvbrdpjv+KCHUKnAAdzIP8yusl5pcSJfXsK2v3j/\nL0s4KNvcjrym9Tg7rXCJnTaHAt205BvfRo0zbSMh5S9kU3UTWeL/Zw1vd+bm\nQLouVpbjTHfuI/yu2AJ9ezh7gKRs0/eG9dzXvPhCuxAy6CNmgPNQl1S+k+qb\nEOud\r\n=fh+8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDau/psEgiVxafbkQwFmEHd/Rsh9DHjNNmGxNpvSpOYSwIgI5Q3Nfg1meT9NI2MxU2Io5pU8fRi8f9ML73J6Cq6/Cc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.78b1eaac.0_1628532227648_0.31875794030321947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/top-app-bar":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7249a3060.0","@material/elevation":"=13.0.0-canary.7249a3060.0","@material/theme":"=13.0.0-canary.7249a3060.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MrN1fG9eYH2PB+/7mEN2VhNVDWlVVXoQymT57XTY1NRX0w8eHOAGA7yIi6rIf3GHoRz+vCdaRQhH/FdQUtsboQ==","shasum":"f060727443416e8bce35565756dc009c0bbe1791","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmcCRA9TVsSAnZWagAAde4P/1Rb3/x5uQ/0nLjsn2kk\nRC5yU07PG50gBJSnT1MoFjGBVtK/sHmMRjrLOD+gzZTKuktD8saMa95ioI8K\nY1XO9MsJYdeciBHmyM2k3BSqbvTLS93XNV85naYzA3uitDRvn+JaLvW2uyLn\nq9IaVxdSTAQb7Ae7SPPUd8Edkuj+K1k84wl5lLBxvXna1km7xbi8dNgyriTp\nCKO3CXz/gwYBi8piVRMCtAjXIuCGoVQ4SX+hIAibWy14frBjZvMfqH6O+lFo\nqDairNlQrPoZfpzEMZb+JrjGfz59NOshJkyKLQdA6mr4d4AwtlHkIomznkip\nqoTj50zXt4MNaZtcPe8KBn+wuVUaUHpZ6g/dQDDxbgK5SWSEgft92w7f7vXD\n4jL5QJrImHsLnRN97dsGRv4Watx+viYiahpuYx0x/AFXvBlTdvaBvv3IgjG9\nuPWVyPFIKnqEIzJVeuoOyG63vV0VHuPwh13PmIw6VGqf4icowujKxpvhzknv\nmMdx5nU5omMc096GIuPrBu+Pms9abEVuz6T4cjO2s8DVbLyE9V0+HkaDxtlI\nkobncJfRD2l+lR8csw42cejJDpe2SDDUCinMeug47Z5bJa6a4bP7wxMgiZf4\n+qvqsk/VuI8O1k6h+7TeDBrrZPUcEtsRNxxiiJvR13ILarhEdlkcEHrE+qUT\nFMtm\r\n=B2Jj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqyWn3VRC42VQzo2P4O9cStRbdlrBbQbq0Fmx75FlliAiEA5M3jgkX+sBO8BqvZTeCWQnDzmJ3pzpoCX7l2/Ch6vnc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.a8a4ddc9.0_1628621212337_0.5104749012076812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.99fc0632.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/top-app-bar":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.f4241a42a.0","@material/elevation":"=13.0.0-canary.f4241a42a.0","@material/theme":"=13.0.0-canary.f4241a42a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DSRTAkGM/FSrZxBP/4Q49eiT98hQijIgVACe1UWS6wYO23MaWpjxQUl8jnn9jcccwKH7DhKXtewRKUMLmv3/jw==","shasum":"a2804708fb75333b519553afb355b6da20f3b738","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.99fc0632.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE1uCRA9TVsSAnZWagAAkr4P/3tFWITEXiybe6tRgx0s\n0fOPMRac7bHe52Y7HeM6uJAnPytUIinXl0JLvAVMFs3A6Cr+b2ALAKReqV9/\n9Iut/OWVC1/Y2Zv0hELVavLL9I4/P2zWglih65pHxnC+DAC/gAHu9iDt8r4N\ndQIkmyXWZ1K8Q/9gFJ9pFXD5xKmrA7WC4rgtxcgO2I9mpcYLBoNz55SGF7oH\n7HMS+A3e6DW4g0SeOOk3Wd5+R3t4WMuDQKSUVoK5wkdpTKY1Cbv+t9j4bmNa\nAA5yzi9uZLTKG+ttlBZzlSn5hizJ5t1GKLolEOtSMoGJnnEPLfyQsSHGsgN0\naPmLBO9Rhffq4gYflWbUAo6ZRWVHsIcuGW4Tmf95C9SGDh0ye4LZdH5fnwOs\nhPRq9/cOvIXm8sWILvBZoJbH45sCEyPiyxxIIZ+ilfXtMCn19+SUvTy8s5d6\nCqSELV+/kaQoLwebDMJp7SInVGl4i/CR9Cw4WM3UZVhZwuSXIFdIi6ApRGeZ\nAPw3hM9Sio2UpIGNC+8K5L8LyHGxnIZrJmNO0XgRvnEGxHz/aPlO2yVvOUig\n/64Yq54ocuf+2NMO6sDqKxonDoYXswqWyZ2p1iRhYcKfePEz4bv4TTotE7Ly\nzIjHzzaKQ4bvT2ILZEsTHv6erlDtHfHjrTcrIP7OKNg1QGZ/CQy0mUpYAfwM\nIO3q\r\n=XW7e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf+9cW2H0hEseh6jK+5YGjLH2drzhDJmKNmukRzWqOsgIgUbtyOTIKM854wpSvW76MXCY1nwCzjDVTP/sXb3EKj6Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.99fc0632.0_1628720494364_0.2606815758727925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.3f47ae57.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/top-app-bar":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0ad12ed3c.0","@material/elevation":"=13.0.0-canary.0ad12ed3c.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7MZrbU28VTz7xs2akOsfljno1EgOWTFxmPogAS4HkfNRDKKoe44Q+WdIYdfZkHblnfRG9vxArnuhvdTyoafWOw==","shasum":"192de34855ddf13fb2c65c1fd5d1026e806a1aaa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.3f47ae57.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGdCRA9TVsSAnZWagAAXYIQAJ6Ap3BIZ8AS38KwF3uA\nf/5IQfKYtsuTCv7X10k3DYqis7iuutrP1OKLnNvfWSTBKh7WqbiAiHLS6FxW\nX+XXKwCu95NAEqScS20kNqbRwaf9v3ic6i2hy0x+KvjLVrWQPueZS/gM7uNH\nmwDKqLpbK7Fr/g0aKgJtY8P35cWt+CJDEzOEoQRdoamEA4mGsSnX9YgxoBgW\nC3Ng4E9jD0hiRkXnWqBKf00xD4QvzXkxoKWXxUCfLjXk4/oyoJNCjcLu8UXX\ncz1AM5U05TXn0j/y/7Wx/Yyl8lrZ6LTJiFAApf+oU+5W4IlmzLSYDvVGKfrS\nE85SamutBAFsX+Qgskm3QLX1UIuoOCFdgr18kRIf3sK0vhqkpKAQQAYWpDeW\nSlMo/Vm1WhdZeUj+3w8KOD09TMVlh3CMWp0E6gvuW3QC+lyYWGAKdhYsqzYi\nWPO8QtznaIZPHdfnK40oOKx6k4CxZZzhEfJDDahJPtzyZzaezBermvfgYvN/\nrNHM1TqNsQ6YXIEZjdzeJmYxXNsSV+Hj+Azp0JxvS29wWytM883k4O6xeU0i\ncQuvXTWVEcYZHi+Ok4QtfU6iiEZxqULT2wJml/5nOFqv2yZEF/BORf2IXMMz\nGN7RSD9afHaICH9YylLRjIKn1WIxJWdcHHgWsqDbcaRzIzlT863qigLhAWQc\nXtsG\r\n=WqCc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuSzdLbJh4pljGPLgC9e42IsjlJ3/cW2TK1RAhMjZvpAIgeim9nhN8NT/FylLVIg7hbcMFMzVYPCMQ68K8/D1Bk9M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.3f47ae57.0_1628791197474_0.9611785515631968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/top-app-bar":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.077dcfcfe.0","@material/elevation":"=13.0.0-canary.077dcfcfe.0","@material/theme":"=13.0.0-canary.077dcfcfe.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fUNX0B+CHF1YLNmd83689fvkViZJrB2CFHJuiIwWBs7o4dbHcFuWg2XdIA7oKwcJfvisupNwICUfIKHHm9AbeA==","shasum":"9655839191f53f65d6e36d013ff5260e241870d6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.6b9bfc32.0.tgz","fileCount":16,"unpackedSize":61668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdHCRA9TVsSAnZWagAAvbcP/iLSTkDtees4z6KbuWKi\n9S5Cx8SBcnwtW4StK0Tbthg3pQervxO/2VG3vkVCyxK5YxU0kvTzE1sSecEd\nxUeNgy4JITBHs5dZttcHGuNxrXGU2KOOp/ijUzBl6L9ai3bfzZSz095w48lz\nR+lQGXXbYhV5CvpFd/rbXngP3eUFfBy4URd3w8SoTR50zdHDGQqwxk/zuLUz\n5rnPrkp5ymRgryqAXVsRj7ugIkWQ7zP6OFNN2DyRoSt3DLkTdpMeVjIR/ybN\nxNF8rh8SZNfLEq6KtHi9kBAvVWT24DpSANEzlrcYgVdV3O/1okPc+0aUhKxC\ngt18/cnbZ04mICLy3WHgrrS8wI7Y9U7LpHQMPovO7r0oN85qWvll2BdOnxPu\nUJMCFz/IGDW2q5WhEKMFkJ3o8xNh7EENOQzfx0C/D/eDzJpRxxHZqfME/54q\nu9TT+1TlwR1AOf6xBQdgwBZsmuEmMaBnANFpm5pjOrJrA0rR4W+x2JNBEeDW\nrfxgDld5GrJ17vJRuFzXoKn4gKX+BqBWyCbyEnFKaA0pt1B98aRVDpoSo1wW\nT2djqs6npILgWVbWjwuQEQmsr/BmMdZoMeO2HEGLf8Y8AdmDkvKUd6g3hx5a\nBEfZu2nZYRVyjxVpRvIM/BHmXTR3I1PnLtT3IUwhRQEvPUycGhgQF2Uh6Agj\nbSt0\r\n=w8z3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFINc5dWT63n8dSNXQweFVjp3l0Za+ek+0Dwj8Nm6w1mAiEA/3yb/u4rWGxqAzhChgJGlW81vC/MIMjtNvmSChZ32n8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.6b9bfc32.0_1628792647227_0.5096871958994602"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.c89ecc63.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/top-app-bar":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.2fb068fb0.0","@material/elevation":"=13.0.0-canary.2fb068fb0.0","@material/theme":"=13.0.0-canary.2fb068fb0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WsM/c5gglbtSpSuO6JzkchUZi4cAtAQ60TPZwMJrKVnW9TluRJy9+298cV4iHMZXK67ndbT2kToe/w3RJYJePw==","shasum":"f9dcea09181168b1fafe5805fb272bd4c7b192a3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.c89ecc63.0.tgz","fileCount":16,"unpackedSize":61646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2GCRA9TVsSAnZWagAAxxIP/2q7mrV66/VacrF1xhB7\nxTGRe8s8V/m1azM4PCMYyW/wVAm2KRQm36qJAMVyY2VA4SEXld8Jw4GItlNd\n0luk6aL/PerOe++ugNII1CdcOXeUuD4BgF8m+j0+VAZgwSZeXZAuejRN+k3g\nW1fR08C0i99FkXJ7cH3K9DEcPxyth3MY72uNgp0RwRwOUO0gApVpkIjYFqmr\nLv/FPHbPB7PHm4ab6hHcgDyIJNKfNPX6IG6LpsqoigcGUrW6OgTqb1FbHnKJ\nP+jfcRB75wo/58o7+a8br+B3VJ65PkZAQxN1GTrjZtFP1p51u/aJpAh310CG\nj7hSTpyhRkKOYYQXjU2HVIZDKQqzqFGixNbcryJOR4Jt1raoyXR4IQYRk2oh\nOCt3wR5SQ4PvE7GhepMAmL/QjUgwp+D7bXm1eXxUCsm/E402e57/CuP+zl2V\nBlttNiRqq5fhzrS/+VLRCqw+RP86D6N19iqb7XUIZDpl6B8aVnXn2NeDeYLq\n3XLKyeWO+Y2AWzIM4E2pWGxrds02YaGAc5iAyNFzrTpJd9mwaBh++4V5O8Fj\nVBLdiQDN4kaW+L26Mdw4uZkjOCRFAwQheGVzXQBfJ3qxDwhu/EZH69mmuFsR\ng8kbHy2uPttM11b6dTCc7F4QJCHV6Gp8zO4HEYUaFag9YLlDA29q5iIRqklt\nrk3n\r\n=0G70\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEXssb41w0f7RJ4PKkxmSD8vXAFkIbaV9RAOkDfGN6HAiEA0baau82HAUttpOavqKpD8lEGFy+L9Ky57TOXXzQd2VM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.c89ecc63.0_1629134213920_0.027062799313875008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.59de86bd.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/top-app-bar":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.457d89aad.0","@material/elevation":"=13.0.0-canary.457d89aad.0","@material/theme":"=13.0.0-canary.457d89aad.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w6zr42U0oZ6quJfRvvJ+ZVrM2oV2NfYsuR1Qs1kZN9mA7WmoLD0ijau4VzrGqC565ncJ0+aGxsLlueagjNglgQ==","shasum":"17bd79272a23685a192f87cbfc7918c15e67916f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.59de86bd.0.tgz","fileCount":16,"unpackedSize":61646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSMCRA9TVsSAnZWagAAtT0P/ifF1huP9BMqfnA1fvMy\nrFB/higneX5U07JmSf2WwJXsaezOBWR3FFoRMRVLQ5RLrmNuneBj4mCtdImA\n4K/Yhs5urY5BzWH6vUUxT/iNJMwhRdiwZNuqrpn9huT3flNQgTnc/T97BeV2\nXb6JrhMtQ/OZgmUOwNldoOcHWH5BkbD8Dqd2CCAvlEtAQGoOtCH3rAMNnN7A\n19siDg5euIg8CPiMgQsutyrNoLyqGTw5/9PjRIRISaGiwIiG7XlViPncINIq\nuD/UDPbBa97tEQB6nFKpjaFtdgFjQMSuiHLMKXkwmKzK3MXu1MoSzdpHfwWE\nW99wSq0JpROFnD3aIzej6l9x2EH9C/D7eu31tP4ebWHmQAXjGTquIl5K5s6V\nzxZd+SB4URFCpKa5/IE8jPSkIWJ98iImNWW1rnEE7OHJGAc6uJFD9YdQkxUb\n1YmK5ssFFZDB8kVYOSvHgO608+8A07skYvV+sbqXc8Lfh1e7Jnn2Z+jSSSSa\ndimlU6cw4P9V45EvUE+7aHrXUXjOhepd3FqhAHtt1PBMy5746p0bnEFxzXAQ\nCUnyVJy/sw008YzVbrrhTI7GhHJbKQS+nfz4zbup+//N5VLYbjY3CEMOzOTw\nnU8+3LAlheu1VcyD2dEUZPwJ5lSQ438LlyM05P0AAgILVyTd+DDAMEhqSWxg\nAvWq\r\n=yzVq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAzO9pU9n9Q5KGOGBhXV3Hl3LkZZHaX2/+JhZK0yNJUEAiBBspIoxjS9RrUO8GYUnOO2iJWntHEhAGXWvai1F3rtEg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.59de86bd.0_1629250700438_0.6015923158987231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.dcda879b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/top-app-bar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.43d2eed2a.0","@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ebODhSVUWhA88FlwiFqJrVQ8XgBIWn5GpC4AZtb2rr2H7gAyjHKQBDT+Wbx/E/cnM2qwGMfpHraPq3/oQmVksQ==","shasum":"15d3935085b0e4bcd44e6183956fbbb94c750c75","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.dcda879b.0.tgz","fileCount":16,"unpackedSize":61646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhSCRA9TVsSAnZWagAAw6MP/3QmdZU57qR/tckVYImY\n56ccoeC2KCfBzuVERvCpcmAN4bWelY0ohxR9bO8J9eTZNx9HTYrG03G4s5JZ\npq+yHXNjBoqA8BcZrhPuQPN3+j2Z4e4f2+wVtBQAMCqsUVLP5WxTks7PQQWu\nCG0QF2e9hQSB2VKt+MuPssI3BALx5HJ4EOT/+fyxqpK8HyVSi76vZerltnmZ\nWo3shUrEEzaNmvVZrSuAPpHy7nfp7xqWOPEVi2vwf3R5IGmkNns246SaG2pD\nlp2lpcxXiIEAucNicDKPkPQVEF7P4wxlhYrPYR43Gz3sPVxnB5rCOnLLuUOm\n1WfHVB8DeyAGHfciDH4kcZ/KIIPpvdmOekYkM1yyp/+xXMDoqA04ALUzZMfY\nym8bnyvklMDUJ05D+J9uJVjooeX0Jy8/Q6riygOFEjhG487pou8APnCqJYoR\nWkXqt+plOXIGkBiM/eHhDArKWWMQ8Kx6xW/xXT5TQwQ3bqLvGsvLVxH/4FF3\nnYEsjVuxPe6y//0G45Sj2SZE41PvY2CqrVkk5jYLAcAzX1L9OZPV0kJ6d1S6\nLHXVbxv+lXGlr2QM8Ft19+voZVH2uF29oR9H2ehjNLuAlSX7yMe/4DVF0Ig5\noftEa+Wqsa7OnANQFQThNcv/w1Q+UpUl3LkBEwkv/UKiMjvkmnzSs15WT59G\n45RM\r\n=KhHO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDzJbR82nB3gOTwoJbE4al18Z5KJrVb8I4DphNGRliFIAiEAjeoeHsnEMzyL97dJfjYbGBhziIOs73Hz9LrgUUERIQo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.dcda879b.0_1629325394203_0.45495366444025453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.dbb8b366.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/top-app-bar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.43d2eed2a.0","@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-efsHvut+ngO9kG1iYIAMufwHwMFQsAt7OTa9hExjKaYd35ki6RyYNAKaHHD9lIgK5z6ehRrj5arNoAktHkL3yA==","shasum":"ef48728c1c8e6a8d802c8c70dafad6e6c4a6da4a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.dbb8b366.0.tgz","fileCount":16,"unpackedSize":61602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKCCRA9TVsSAnZWagAAdkQP/29DYnkd5UbwfJMgnP4b\nEYhGbJOR0gGMPYkwiyQpvGg+GjoS0pjM9Pdhk7o2ttZlN/pJ2JfXHY6VtXQN\n5F6M/UWhqY6jgxjH768zjKzpPaWCkgF/W3cVQWIFLVSG5gEUm/j8KDgPvauU\noFo0/K6c5vJ5sse8oULXunWow5h/3XLKfePef7D1AFpuRV+NCDTF2oFX/SC1\nP8MX+MD2QGyEidPHZXHNmOQd8XZiedijCwLvreM11x6qMSgUe3rCJffBgy20\nuc78SrOtZjDti2I5qlENBnhHhuVYt/qOdTn7emv2mrTMGKnaEHxueqUAuBLa\n5enWXG1RxAhvfTUku4IBNUp9WiuGaBGB3ZCrb8DfLmiHfGJpvnsMRKpeNYcO\nIulpcK/hOJqRJU69iz/SvNMKxVbrpZpUJMY8oBhihMayh6z5SlM8O5qZaLwI\nO97Ge6OGZEGDwaJjSDOFnzrAem6SRNJSr/xzmA0Y7ab+uFXlYWH1CZWa+YuX\njKbb8WP1C8csSiRYgyfux0FcDmYW+mj7pyonO6/MQ7HB/lfPF+pAuzXn8/GH\nNfgPg1nPCu7k1gitE+VEiMFCFfyGPN1k+OMBze5E6wz5JqqFUBQI0zL1NX3n\nQdpH3vK0evek6pJCPYRca2v1V2g9yjMI2Xaimx7AqwFz0OM0BwCfaSV5S002\nLjbu\r\n=/vHA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAcHs5fHZIyGYSdpVXFUa/AYooevle2AdnmrnY1SMmVhAiBvjea6GnByYe8SKDP+B9ysNueVbtG4Xh6Ak/y93MMnFg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.dbb8b366.0_1629414018225_0.4320525005013742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.c6e3060c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/top-app-bar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.43d2eed2a.0","@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-srnSQZC/FkmCUlghJ2hAXu5U7i3Qi1rwgLStXsBptg0xwrikVcyhZJ6ccs0xm0sXZ6kZK4GYpdMdrySsy8DE4w==","shasum":"ff58a3154921b162b6b75378653abf9e49a43bfa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.c6e3060c.0.tgz","fileCount":16,"unpackedSize":61602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuLxCRA9TVsSAnZWagAAOJ8P/A74FOR47va0PDknpdI3\n9f4Oa/qr/KFQhQgP/WmCjWBT9Z/fIpTX9k3PGTYIdPSm3Hi1tU061tVUdO+v\no9LBv7TvapzlBmY8tQla8pUzUe0lRqTWaNXt6Iswq+eB5+q9WGDWl6dj2Gy1\n/siM8v+Bd2D+KcQxczelIlKvUcbW/ktVJKabEJEyXVGgKKa3llXbltcq/t3d\n/yx0/7vqLDxHcRHb2zQXenZ1PNlathDedFeFMEAbnRgQw1ac4we2vfj0F2V6\naAR9mIbYVo+YP5bKgfZxPugmbxPIcEdTHeJgPFZeSUng4PL7TeZsbOYhjv1d\nADHgRCYAr//iQpaLNOOMQkDP85Z9W862tMbmA96Ai4yhWb136MVTmwl8qRma\n1y37Uk5Asbwph7n/GpKSBJS9Ew/uNg9RnOHarycvVI/Jfe0HH6S/q0+TUlKx\nsg35K876EoPkk1vRQ6+OpOjBgA5RNNXtzuYjS51byctGe3boI97IxpjF+veg\ngEQHIi1PLtlEPn5LZQpZY6+5y7YQV7aO3cysnQgDz9tqtcCSa+0YahkUlF4E\ngWrda9oh8CAm1KirKIMCmbNI9opea9eFubvMrjonys3uZE93oUm4Ur0laSAb\n0Q8Zb4Q9wGiMND2rO4OnXRTyiblz7hhZhtBLsquga+mDsWrIP82RjAqcpSqD\nT4kK\r\n=2utS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhNYxeQOxl+pYNZnW2Yx+S0E7AHP2KJH7O9BwzOlMTDAiBEYD1jlVxyO7Eyj+DLYBokQtbil7TWOjXKXGyQmiwyvw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.c6e3060c.0_1629414129227_0.5519707050272409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.03120b7d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/top-app-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2E7aXL2lnor5k3NoDtplFezkPK15seShxg9qyHsWC2iFJYlRGSvTXCWDMFoPf1OviYxk+uRLFL6sVDvo4XP2gw==","shasum":"ed4f9f629b8bb76b77e9859e3a04f6c7156053c0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.03120b7d.0.tgz","fileCount":16,"unpackedSize":61602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvbfCRA9TVsSAnZWagAAjJIP/is/6jCBh8L52GKi2HOc\n5z929lILwvE2yOcBjltLIzBSU/iZo+QFEhcBQjIDEX9NOrooHGf1Gswi1UiE\n9JfpX+wcFTFQRWvQt7M1vSnGqJc74zZtSEYliUjrM8K9O75KWbQGsfvtWI/g\nmNe6qK4zFU7kEHS0kBXfFeJYt8nuHoq80bhznGueurXKc7rLSnEHXOmrT16X\n9jQf6QlgWe7rqIiWfzI9LDuL8UzSg0WcuEuM96LNAqh7VZUHxkU0QXnUyzJd\nG3VDKqL3Rvp0WChLJ8qEplv9mmmNBPHmF9eb8e2OcD0wOgZmO4OZMbOJcsA1\nxZLflFAAnqzIsazVLKdqqwUyZk5rPw4rVAzwOkC1GbKuFvkP7pEB3d0wixGO\n7YaVtaI5mIcmn8TthJ2Zwd+2znLbd7uuSVwtc4OYfTu1dF77/RY0rEl0Tmyz\nCOMWWhNDOmZinJmZ56qGLnw6wBhPjyU5ZiQcBkYu+4oLkXH9BMSly1VadYBi\ngwT/jDeKhJmxv3QL5ehJxuxKB9NVastZ8VO7/HhC7y4GHxXPWQ+J5Vep76se\nWZAKksWMH5jZjQPpyzznoTVXG7Q0FxEijX12QmsA3sKBJxbDjK28Q9uK33om\n+A/DvQcYg/wLKwfiYPE1pvi39oMVh2taEPSHzApMLi+DuQtd2wXwuhAVSyWX\nD9gq\r\n=r8of\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6DgInRxySWKE5hNS3TJ5DAZeVfJ6Kh+pwu04ie3vOuAiA4sYsqVWYhgf6G3f5ZqJhL+XHFSbc8L5DZ/rwjIGe6PQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.03120b7d.0_1629419231612_0.6400116652572545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.d75a5f74.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/top-app-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZjAJkLBz3RymoiFW7xsBvGIywvyzYRT/sZuYfk1btZBb5PayaInTbpG4iG6c/Aq+zQhHGI/fLMpsfkBQE/d3HA==","shasum":"834fd9ea96f762f984ddd3a269d2d40928413cdb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.d75a5f74.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2AdCRA9TVsSAnZWagAAzuUQAJifAH1qfMAmDLY4oA/H\nv0YaiYaEglQE4gu9WcPFCwr8pkv7YzJ/tyi4Ke6CbZv3wiOm/FmBOadH4YB9\nCiX7TzgfxHsfcMNozPc7u85qe4wxymOrD2llEebcTEV7L/Z4kzEaNjHjrlEV\nvIm1LBYL2DmrvEGkJnDgOYdvvvzHA+8f15jr3Wq5/J4IflBo+xRr06791+8V\nJanCogdEP1FaC29a+Kz4hxouGfAlROcxtv0bQZMsFwo5vNmcZzag4w8a6CVt\nmIPPni8uuDCpcAEYlIOotk0AJuIs+VpfHDO7KEd3unMfWRohhlHQreV6R3A0\n6UTukqAe16W/OeBIElwweqejMmHwNZ7NIHhmg+y2UcxKlze+PDpam4XVSPLi\nzlUR07IuIEFJoTNHs4XMuTxodJ5TEk3GZ9Ij2QapYBpGgXfroyvJGh8YmrMZ\nkKR+6GikXpr/F0pmU9xjQGxLxxh8T/qp0iEGeojrQSmtG6zjqbBWiuzcBIuh\nh7bKsYWf/ImoUKk2LjZyekdjrzLHGjkBoVRtb94emJGTccYK63KigTrOk+VN\nBAxCCaJiBX6G+4SWH/2X1J5dEUCTulHklgNCXa40cDLPXCHnvMH0L0zHK+Xf\nEUWbNpjnXXsXeMj1wOkxFX7WkEyEqiIGaA+ik5wUTcJ93m5IwIbjpuVOEyeO\nbTxN\r\n=2cX9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWYQ3DkUba99znwMeC9Vh5+6ImjX5FmM5bxJ/m/6GrxAIgGpw3dBynuW7xZxVmpDnBje70TozfEHDWkjqdjpa5lxw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.d75a5f74.0_1629446173750_0.553976998358187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/top-app-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UZqbqpbbYpC55uKHteGYMWpWKZySctUYiDybZwzQjqCbTgWAKjfjw/Ls7vR/UeuCt7Ot7sG05y0hbiW7OYKdBA==","shasum":"448d7eb8d1a102c7ead8f77cb28af18f55834c5c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.3d79ffe7.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SVCRA9TVsSAnZWagAA4BYP/i0I9tyxWYonnuoehRE5\nzoP+OJRlBLgMhCkxtMrVW1vB2YM6yI9I8jm80wkdaPld1djOUWr7woUixNWd\nLtYwsKowZPMICzTHm8Bis5ZqgGN+e+ZDBqRYW2uWPToc/T4LcyTPK/KJq8cr\ntYs/T7lFx+ppTL3jAZ+Wll+FHtTQT4GK5R15e0/t3h+t6n5WOXDq4nwoduJs\nkF1m6xhw7lhYNnmQE80ueHGbbrNvdSfhNKXu6i3pYHMh/KTTVtEgBIxXv/ti\n5O3ezNqyI3SGKWErZcEC7TPRaZr6ijtutriaV0rnabGyyr8YzoUAMeTFZ0Xf\n/pK23l3J0PJGG0j6CU9xGO5OFmRkcXkMjl6XyjfN+mqnWCvC25gzGlAEFsjv\n03GJAAx0ykmpUV37cnIvCVPkqJqBmseBgRWiV0ytEC1nq8RRCtYbN4cx7o3j\n+Rnu08js9eJlSC7KNsQ4n2RPV6AgAZD95nlpS46yVUJxKWXf98SpOF25u+cJ\nG+IFI0f64h4lgmys+8Hskk4/qNNxeKlk7aM5yYlb6uN2QCxjLSLDodMocRmO\num2PPDrqtaQzpkITfcB7KVu4fAAldYXcpM0WwNB50T7oSge7WSEas1LwLl8H\nKIK/WD18TIihysOTo/o4uKGtJ+A9GUbVeBSF7sl+QXtBkGM2Ft6T8+1PsbNt\n/IKg\r\n=qZfw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi9+WZRLLOhDgjzDqzmck/kYBCPQdnu4ipHdjfdXnMngIhANjwCFFLM/BD9xOY0JutwsGsn9/GAcd7q26pYokzGAlB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.3d79ffe7.0_1629480085008_0.8607369263958282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.02213ebe.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/top-app-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ORftQpicWVeGBVcZ+JmfBK5AM26QqDHPaUv0NSAFrsatCGlYUw6C4s4FVponvu+Z9/Q9XhVd3AGDgGk89a05fQ==","shasum":"ebd1ead1a7cb4470719ecb6004ac9f0fe2052493","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.02213ebe.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+WwCRA9TVsSAnZWagAAHNcP/2FYCyygim/4jibro6sE\nffbxeURWLR9NT1n2Lwo9auvB+5AEB8loqlg7CrIjzrnLt8QI3IpIwLvA87F1\nHIJaO7YYSmtuN0wUbFKturyz+X2bx4anEGt4oWNggvZETaAzWOCEL1eTqI1O\n7ZbnwnfA9Qwk/kp1J6YbykLczOdqAbzqRX7r6qEvq8NSNSQO0SSKUegArOlu\nLxP5o/fEXK1bcyJ+UZNs7qgBxu3WL8Wti8M0ciEIsD3Mdx1H2eEDB4VSUtyG\nai2vf9n5Gid9ElvN/YuJ4VIHpuFBFEJ4cSEL8sJtu8ydD9fjQST/1P6S8dqn\nvYOmQ4U2uGHu4eD9UCcTHXferSCmrwc7xs/l9MUKqQ9rfnwLzCmhXun8g2qL\n0d87/8t10c2I6xC5/tUwQLAEGl8nJozRlpUYyJrYoyFA8/ATStX+T1i+3E8Z\niE0vw78tRlAzWKXnLDAbdS6K5rY18WcXPONQE2SKz0Q/T9/JXnRoTVlPy3D4\n34g+8bet/e026ZVDkRO2MqNPTIpAEGph5cTAMyC8GNuqCBvGED0zWmPiVqd/\n+K9SD54kqJN3IKQNPr5wXiB0wHWIRRKeALpeDAbhR+s8uhhq6d9pP+kbqEw6\ny+x81aCuEhqU00JCIznZennDFmdiB1BI8Ka3GtzBJkGPi9pQ16t7fBSuwtaw\nj1Os\r\n=OVVs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiTj3zj2G3FJztFcng824lSVjE+GkFmrTRexwqKWarhwIhAMEV1lo4erBM+qzjFVjmX0p/nLofQybVzsbXBJkESj0u"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.02213ebe.0_1629480368268_0.9783903258503788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.90a999b9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/top-app-bar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7da413ed8.0","@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ehAxWfpmuGKTo70PhrgTh8HR8/wH5wr8FfohW6j5mnSIS7837X3326L46wizFa13EpQKA+n/M4FP6cL5vO683A==","shasum":"2a741adacdf583fb67e0e5304db7a5aa1c7cd4c0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.90a999b9.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/ebCRA9TVsSAnZWagAAdrUP/1/fMfCV4eVSaKoJzgLC\nrNVXdECgoHbWD+tqWYby0g8x6hKGm6NwstuzHwy5dGVngoyAGBxXhIafOA/V\nAQcu0QDxgGceUm0Uf5/hoBdHfuIe5nQJ0piH0fAExLWktavH3ohWljGKx185\nqL/hTsCgMMkNqB6iTmXr1UCNYowgeYZsaI9DUFnVOmx9S09Qsnqo0LHWaakT\nSYN24ypML/e7nJsQUnZuBLq8Jk4oJysKo8B4QNpx+7H+YwofLDf3g+8qAUuT\nfXZpC0QKmJVVml/rAy/zQSO25+LOwqFwjMTK+8mLny5BmxaD6wQkQPExQEBW\n8v+ne/zmseHpBFzsHRTmCTmUUOkza6hCeismxOSQYEH8YuNETxmV2dApkJ0m\nR+hWL2KFLya9CPghpWUPk51wKHsoMUVcoFS8VmWL9Wxl8l6eEmbVF5+u6be6\nn9rxZi2y4IZj9GjGMg7mIZ5hlCnKksC6p8Fg/FB4iHjuPCtOXqFlGE+cVjib\nKsbNtGZwLs1FvwvTP3kwVEvJ2KebBiv8OFf/8ONhD5Ud2TSqeXY0o7Sq0JJV\n8AlU5J5EGar9Ku/TOKxgmx6SLZ7+JBthDyvgObLIAiXjzcZ8RMAl9RVF0h9l\nHcFSVLW5dmOJvK49IPVbArPqrv5eNTPGdmbch8CLmk2YBFc3nj/j2EsziKcX\nQdV2\r\n=EA9A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgwDA7OHJjWl+DjBDe/mI3ER68MWwQcisOEpBcdSDW5AiEAsA9eBGOIafYQjyZetfc8yGSrlPjxwpX9YNuT+UXZ4W4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.90a999b9.0_1629484954907_0.3283565944909639"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.6db58716.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6db58716.0","@material/top-app-bar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7da413ed8.0","@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-14GvIPM6qwW0szj3Ybuuar153EHzpWvzN0NMeFq8o6SUH+n1rtp4RydGylyL3jwVlXuSnmOnw+uO1E5YcBWW1Q==","shasum":"058e740b38c7d9aacc47b7710ca679b8a3c82668","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.6db58716.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2VnCRA9TVsSAnZWagAA6+oP/3HD1yc37SP9mGNst3j/\nuYYh+XD6up7peTFUGSz86/+oxLA/rW69SQ+cBjWhRwSx5scAuUmpd8Xrcize\nHGGLS/x1osFZ2ASeXqWRjPssvvv2K6huIRt0dTe1XnACnTECFKh/AO8tgzmO\n3lwk1BQpjIpsuNeIWslllWvUOBAlThsvcOA6HgCMIUCwoGo0OS8kuQf4wLTG\n3h/NT1wsoyCZHueuJieKZ6SILfMDOnm/9xLcfpUva/ubKhvEK3DW+1bgUb4h\n3pe5vjj87lUV4eHfQHmddknz9yiKlT6xna6dcIiXQN2WbWUN9rkzlZKsw1yb\nVCfLJFMKR2nXnTI0sOhqwyBb4Zi0XT0JVGGa44Yerq0lQS58hYEiVJ+KkwyP\nHydmEWeRxGAVmLVFS3QpR3ZK1v72DoenS6m6HZzlYgOtaljjYKvzt5oTsqdT\nN9/5h1SxYe7cIOLX+0NmCl6LyQKVpCMTk/1mhux11RglpFtwCtPiTAAtdzCq\neIKjg/v+SRMOf8wSBTdLWNkMlAQYAbCo+9/1udELVJb9GnGItO3OThyhK/xX\nhJvnU917PRVWbTJxMly+JEMbXbBTGqiqj792iYZcabq1Y8C3O3LjBVugbO59\nmdOrNQKiv3bWpEs2M5YzwJ68D7sAtg1dVigis95IPe+ytRq99+xr1idrUR/B\nMmVj\r\n=7wVT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiyhlMUN/LDuGDYPDnI9/BqNZpZC6o5F220sFGL35CcAIgaser3KmrHYhJJmwrGPQGgkKSEAfimdmMA/rReDS8+c0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.6db58716.0_1629709671443_0.5957710918854926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/top-app-bar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7da413ed8.0","@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dxCet2y1kx6OYzzfFDx1h/ygsJzPszm1ZZ9xEJpII+2nPCnjouW9PdWSx8RxACw7JgzO7EtpNSJf73BjBbI4YQ==","shasum":"414b9e8fd0b57f607b5e550de6ba20f882af0bce","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.9fb5bc35.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCYjCRA9TVsSAnZWagAAgooQAI1QxZsQ5Z2k9o8YAnOf\nnIc4AONNuZHQQ2cJoBjmfXF7Dmc+iHIXoW/Iwo5Rvkf+5qVokDLzW/Pxoe2z\ncoLZp4A29akVgdNU51vpbZUx9j4iXkdng/OG/xxYjImq6xXx86K2jNbVYjgr\nT5q0and5/hKTFkxuLx5z/+OlzlgR455ItojyYHDaEjOruMmsuxQvHPjHSNQ9\nalrDsrVs5Qsf+7GwLWX9Lu9xb/1J07Dm05hLZTXLck51yF8yZtSTCW04IzYF\nB4W+PgWbaYRKFoTc8yFoulx/Je8n6O9futevRwjQsIyTYMFn4XQ1k6KSBU3Q\nQogK7C9k9SjGVzclrIA2Ou3qkST1NDCbXJ+zNaOulUxwHcLq5dmlND6qXxPg\nkaa2VgfqIyiA6KT7owWeVlL2iKh2vPblS9ED75QntMe0PHfF9ip1G1b92oit\noZUPCWlfggKwnra8d74ko6LqT/ToOyPuKeXbKLzjk9BD8nLuUS7rUWR7bYYw\nNBpExa1xnqgVVeHLHdtG76GbLJ5YgjyUfwzwMFhIUGlUqLLMcVw6xoefUfJd\nXtCr+c5fHGUMdnpNyvz6Zu6ySP1xQM+kYjtt7H2F1OQRKeZuY3Nccj7M7UxB\nUYon2vwWxKTuVYbO7BPqX7A9jkm1yW448FC6zfMO8USkWmDS2hjW7NnAw0j5\nfVmf\r\n=g6YY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf/zjjRgYZPoFDV4jojNlami5wlmlLHTiLivud0VMwlAIgTzkmM7qoGGjL445hK98dcuJ/OFGu2BsX79cb3hLOYMM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.9fb5bc35.0_1629759010878_0.1875751106391974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vTrhUb0buwTNxpRA+c0hCDN+bhDzpY7sZz1BsF5kNeyBIyx7P20W6gYG9IdAn59CkFk27WW42tqJZ9ODss3bRw==","shasum":"ddedd3ff638c2031888a10edf069b96715e62ef2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9LCRA9TVsSAnZWagAA3ZgP/iljJGuJfwlE0HeNG6mK\ni96wVvYkxTyvlfGBNhZUT6FLIvoorfbKmppwbhvQN5atjVtaKM5V6tjDQ63L\nR2u+ewNOPHzM2zX2R5OYHYFze1jV8dmSeLuuWCBIoj276ffU9ssg6jF6B1fy\nAtH4JLPnD7rhyiXPs09ZBAILFSkiNPOhe3rAu1LwNLpNTulxHjc6lcGJsQp+\nVyZ05qOHfkMWDVF+vozrJZ4plOLgWw61oA24EgD8BA/CYu2KVa48ODvVJlFT\nfwxdP/YLiWlT7cEeiCoshMghUzd85ouldQjZ6WBSTrUKNpWl0rZvRQgZepOn\nn2oFstKFMx3I0SE6vaiM39I7frjKT1IpMJEHEKEieiCIAy1QKeSQ2HJYaGDg\nF9GL+DOzEKfYq53q9m5r+eq5rLTt3kCVnajV8UOT4+6ai79fiSE4nf+SUHUO\nkI7fYefaki0lkrF7TtYan/bHbCw+8H3w0FhCAHLJpjMfT3pki3wJ9W8Q7hBB\nc8f5e2MNDYQLECZbs/sUDo6eQkfF6mL1iT864i8cdF+nbuwG7JZmoKeZMXtH\ncFh/cUrXdPZgTFWklc5rijzmSV10qKVt7OC/CFV8f3T8Kt9rJqQ/lMGjktmC\nr5AM43ubVIG1dGCUVsj2w8YV8uRlmqhB5dykWRoBSsHQkcqYixrvq1DAiscu\nwDM8\r\n=EsfY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8mj/0VvoULT5Id5/FOtjYmnSmaGVkrWLFeXcOY+1jEAiEA0tshpAXfozUn3gPd84zf/aUVgaKPKyvvCXd+EfAy0L4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.ddaa5d8e.0_1629830987693_0.9467693156463624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.756208fb.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.756208fb.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UGaXSRbgrrBGr1QHBmB0v7zP1B3OIzu4w98FfH4XQgAVAS+wzK7nbHIvMAKyUZdRAGvJYAYyTlt87yvrysxKoA==","shasum":"e94d356f05d0e6fbd4deead2f7ff6d5160afb4f1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.756208fb.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8LCRA9TVsSAnZWagAAFugP/1WCGgEAEYPqf4H8eB8k\n4Ca9kX50tsCWXCjmcDrPd0yLJBbiSAcU1pJoLkZepbiY8nytpeue7q2OO0V5\ni+RWgZEHEDo9o6xJDOee3x5J0RxCcTPVLllz7sT+9J7T2gQufxuPQhbLrcK4\nyRe09mFbf9Xtp4FE/epZSd+yPeLHfEEhmjoHk+Ez5UeEXqSZtdqXaw4LrSd0\nrUVWmEAaMxRv6iW5n0VPR+cQfQsOlwcVLM2jqh1ifj1qP5fSrrqEg22oKvGt\nbprCupNgBG7QDO5mY3a/3NNnL/xbVvxS3pRghQpEQchB97irjwRTi3rxxdmG\nQfnrhofaYUZ605v6goBtTc6pgBMohMNqG5aYBGAI4TTIfnEAvCFExbOIxxGe\niGZuWyrxFitctnVFJYGteO4dX/E1QmXSnQY7TNxjZ8hdYxqx0HFqQtFzVE1e\nKtMFD0UIPn/WtCNN1ViI/9B7PlW1sjMMsaKrN5AWGPVyy78t/acrj+/i8Avu\nFTQFe4oZF7nDtP8ti4sCzGI4fjaST7zKDA8LDOoLoeUj5EiHJWaqeoG74AOm\ndXSAXIBVwJrkBtgYG6NuwuGQKlQi1dL34fkaUaPfHG+WFaE3g9uCz//6fvcK\n7Q6PuX1+YfJNE/m6xbMAA+e1fNeLTEw3hucSDJMfvKNE6Ekmjsj+Ya6czCxQ\nFxqY\r\n=yjQH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG60KWeoKQIL0X2T2+3/xoWmG4xPjuYuFkZMYm33K1mdAiEAh5H5LKr/EFs9L8Je7K8V+dCWfXviftNZ4wWw7WlmSMc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.756208fb.0_1629921034865_0.17307488795632175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.9576dcd9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LcnzUeza76wzC2azk89piRRN5tBPS1qciJXVyWPMwoP3DFJ6PiDpaBS/hu5OThNpiPD4Go2QIWMyxA6lildnQw==","shasum":"158103cdf30bf8aa50131915fdbfb3a7b5cadb85","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.9576dcd9.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmbCRA9TVsSAnZWagAAh5kP/jNVl9hP9eEhL1DBCl2i\n62g1Sy3wEEnj7DUeMfvmUhuBh4UTh80LstMX1xHd9pHg+Rq92s1bbCgwgobw\n6tx0MrG2AANyeGF1NuH8/rLVWlz64jKFDKSm8grb4RQcCBBsy1BVURXolpng\nazPMxlMwvBnAjpWebbdjIvLy+Q1CJ06esOu8Y22oRJGR8069WZ/jkL3ZH1a4\nzp6ocRvZf/dr+XNwf40mkw7GuPcAGKKTm6gQ3kukeEnJUdvEIbRUmHh+ipSQ\nYbQoxrMmrTGQVwHot7kRn1pC7Rj7PEXIwS7ORUlSkSXscO9kHsodOfgzSjE5\nPMIPLb7Z3tfkoNhbBpik41hZ2SAGNRPPVZqgobBW4b0ux1sNaLZq7EETetae\nBOFg5DlrNrDq858x2yVj9XghGgGM6QVKjrD7zQ30AVrLeTBl0Kh5NST7fa6L\nPKmk7AF2p1AtJLOMe61gfBR6lutNPI3qozE7qO72oyWtVIDqqLW2dylgosq7\nMwMT2NPYU+Zoy34sOvYy6mZM/ihzurtMdchVBVIlhrOeh5gDAPSmBQ5f76GQ\n2Y6V/fg6ZkQr5zFePIeEyEdtjp7jr+6QOuIRfFn8iTDhTWDgNK5ZTO8CvSeU\nQ4OsnKwC+06+m6Hl82HNxduo49DoRYPYw5ovKHuaf+vR6j3aMV7R04xyW7lS\npocZ\r\n=FrK8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFovwo0Pb3TaVo1lRtLz3NAKAdu/wEYIHPwwIRuSpms5AiB+j5mF31w3A3p4zuyJhFhH/GIFRTglhImVoR2JYVwwnA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.9576dcd9.0_1629927835211_0.6888155085697778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.7531cf97.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vPtq/gKf28jvzgmEiO5QABCYJ+lnHUHIZeVzPFsIw+lp67yQGfFVAnmf3aRFT1+vWyowQ2WPd0rT2J2VMTHwKw==","shasum":"34d3f9adfe26588c4b8f5e5096a7b7233f1d1ab7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.7531cf97.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ86xCRA9TVsSAnZWagAAL1UQAJmCx/EcKkFVslWrSTs1\nnUcAdH4eFfsM2CiLYhKNurTjKgnIph2hIm5oQ0E2LJvP0j7OVDMe9ZwGuBZk\n5MiMhf6rFX9J2XXQ0FxrcZFAY9bACkzzrHM1e25mUa73bWB8BDLVYnRI2dZ+\ngngp9i41UPC1yoA2lo5n2YZwDXZpocMmfCLwcBO4tMQxACfOU1FW4qfkArDC\n5OI28VKOwGREz2etkTLcDLe9Fj5iR8GsTKDatkL3XO4kW0gMJeDbL53Pc5+h\n2+++V+su56Mj3mjIyp7yIOKnwSJlpoxleB9hzzrD64J7uyYWICMyKuaEgSEA\nCsIom04cMisb/A47mz+xSAFC4sKfImWHz0LLB/mVewzdiLUUEvZ7YR78BVNv\nI9os68w18ivB/jwXPC+az5P4LPSgL5nucmfQyKFKVGEKvNsT94Vnn7D86pzq\ngogaHqpE47ilKV5JniiRyJJB10hRwUoKw+eMZG1hAP3Gx4+vG4K4B4ERtpax\nyff/kHfs5/9QH+HIUJKDoDE201+4xvq9AyxYE79JIg6qrPF0KdBeoUD6+YrL\nlzgrI2rL8zQ+PiTuc4KJKyp+5t/nPVnRsscsrDqH6eF9aF5q4vnEYsN/eQ0P\nVXb16WlxuQ+27H0a6NI1/lvn6oFT4KS6+WdO1sm+6ile4QZpzDE1odlD1Nnw\nBQVn\r\n=ASot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbShsbT4KrHrTGAnLwwvta9KqvNZwZsWArurQbnhB3NAiBBwRFbabHkr9VLbHRfNJcUlkSEKH3miDdo7nkjLBQfXQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.7531cf97.0_1629998768734_0.17486515257137825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.3bab26b4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kVkmXdGdl/99m8NNAeBYeEjHKGOm3NhSLgSeJVhPT54ZSpNQ86bFPTjqf/w/8+qWz1mfUuELNto9oGJVADeD7A==","shasum":"2667e8b3068cb319c897ca474a8fc7689581d9fb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.3bab26b4.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtQCRA9TVsSAnZWagAAdOUP+QGbOtfeyZGGM5bJeH63\nz7F4UkRp0vBSIVKxYzhiUewFexl/Hpi6LBxfatHj4DlGG76zO7/M1t2tS5Ms\n+/4NvRWLnsqj47OY6cvfmWceNM2DRPxEV/xrSazrZQmVc9dBXtQpy2z6UHeh\nrAKf4bquNuHeT+F6TkTRfDpA08zjE1GIrwswcm/kef/G1H99xSmhSS5wplV0\nMgdeiLqAm9Bj2eMPV9pG6UyEIPZWMdkBx/fn5vX7WGADI6F9FkAqH9wfE7ee\nJbJbgGO7gg4xd6yAjxTZlAwY99C/rGmkVcbRvwcwh/f0hA5E7WvNkZo5UkoO\ncfWe9ETEp7B9zvZe3zZdWfCBrrhhfW6MX5T/pFWe/KFL9L6IA2CcgHtEpc4u\nfiFRhBMFU4FCiUQZBxN5OXZr6pk16fGop9qaA2OaYshvZhgE+cSt4BL8YKXK\n1v4a68g9MBEjcglSNJvNGg9W+1sGWyoiDs4ctPIOhgQa8suIGebxg1bMfhSD\n4NMKGfk4tqwhYStqOthl9nMv5pIpSckDwpJa1Qp0Fht7utpzPcHSNwi9y/Nv\njLAyHXwli8SdSS7UUfE0O2cSCvvLevkLxTtEkmPMJxV7oKOjIf5AS525Y31M\nP+r3yl6wxNxncNPCVVATcsf8xlfGTMoRtGyE9cdvpMn4bIk9YdYiQMbYOoeG\ny3ho\r\n=pjil\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjKr/QCR7+EB8+Q3qbgNXfC+JcPvcD35knKpl/dkFn3AiBZu/5f9eod84WSnHugxkiNXzE3vNsJ6Wx1q4R3rs7GTg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.3bab26b4.0_1630014288532_0.5421869735059528"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.fab48bee.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-beDA/Vfd7o5noUr2As//CZwUaghoxGJm/HpPbEeJdh8EqYetfdjYLzmWbeZihjPcfDXQvtyEq7rn+vU+A8OMFA==","shasum":"139fae1f0b728d401bada5096bf4a589f6924eed","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.fab48bee.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBCqCRA9TVsSAnZWagAA+D0P/2j3cmo5elr2DV2JHRn+\ni24/Y+XoCoXjsclDCG42KtFj8k+L1RO3jqU89rxcIP+/AmUi5BzE+sTE5j5g\nndCKQckZlMKu4JOBjoDNNfc3J7fibFz4haJHg7oiPK7nRbi/HKPEQe64yhYQ\nlzA7IxAs66AxPnB01bDr+EvRwpNdwIOV9kIFofzYBmBsThLMjd94FrL/1exo\nV6z/efsLvvB8RIFAR/C17iQbDnk5lEQZjZDFxQ7ufIE7Jmth1eyxRuC07urD\nyuiV/NEbrdNjPy0F5crSeToHgVcmozjitAyeYQ0sdHdNv57MaZHW0vU0kflV\nEMPJZAz9JyAo9RR832zR7hDx2IX84jx6c1SO0mDJ1Ez951O1wRRhNmIHIIql\n4U+wuozkeJ8LJoApiJIXVFLWdgGOwzzq7YJo6q5oiDUG3cFE+AGDN3mj3gbb\nfZ5R9paYPyk3b9UC7XHvj9F7Oti+e/rXpu40KcW3dS3Qy/um4z14vuGwcwGp\n1govw70IVSBFiQat3bwtViIOrl7dLgoTPkKxiF+KkuRO27nyqmzrsJFxUKTt\nevSHsMagWNrFuZ3mtqHyAhqpUlR9FlU7Ol0YFlx2OsHl2zkeA4V45bFKTpaB\n9QBlVjeriX4bFFSyhUGd92/EiwVd6X3jcYn93K4vW9yH1E+O9WwptXD8Ua1h\nmYCO\r\n=vDAN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjig/WAQfSllBUVBscNCITIO60sbxAaPHV/KS8oq55sAIhAIjQAqgCwsJ/al0LcnCLDeUDopI5lmAcVhLNkMKj1E4p"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.fab48bee.0_1630015658143_0.8063901177286976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.dec18df7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H/CeQQkeoD3U+qiFDIm/L5Qen0wsiFl1PXGs5mcAvwiWFP/jmZgQkV8mG3x4Tgp05k6RFFGuKJ5XGcGRLRoemQ==","shasum":"2b9c55d00a4bc2302b9ed5a6d85230959e964305","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.dec18df7.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbDCRA9TVsSAnZWagAA3ucP+wZoTx76NJGSrWuySHtf\nfddXorwwbIHTHU4A1dKnQtRHYwfPQlu9tSDjX104DIG6hnDRBmtrx7Pg5IHX\nJomxeWorc0XQxsgOeIdxYpxdZI5GOKo38sF7LCpUmngLcxY+HeFziDORCI72\nudF0790fkKsAox949Cam/4xUj7TQy7cVQKXjaU9WXeO2ylezqKj+KLOZSBf3\nDLX5QBXkCGKAS9i7FGiyHCpkRi3+XW5EDiGPfF8enhu+B6LXzfDq6Jc68vmC\nUJYDDeKjeqUW5XZUUePVfQBVmbPxGpVnJiu+ND8N6Vf+v68pF1rQYZQi1UwE\nrrukgEs6N7z/by+VSHG7oN1HjUdKaax3xLAI9voTiMUt2fC6/dx/qt4GtIhP\nz1zImzGgrZ43WQi2298FlniytQlJzdt1tGS0awyoPuw6Eg2x1O3Xiz7T/fxB\nJOi0scNg5QzYhwfN02ANJuavIC7WcZrcOFkmMBwZ2fcsPC4SsCIrxRmjPuAP\nR47GDfuQimzakp38ppaYpO57XssYXG6wvrPFGbXe1GcE4QorKrYBz+YXteDG\nTF79bBFDL2N1EAKjJcGL21gB0Ff4dQpjMPtoiRkY75HVWRL8TIaIqU9OJ/K+\nnsvydBr/CDjIKLAuYTUdQE2DmeIebQcq9ABYFiElwBtU05p6VUOrY+wKShVr\nlixC\r\n=nnjk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvZ89jBzeleYBe9vI8I7NxCwS+aTCK8LeSKVWA7s9S+AIhAN9qPFyHj1Bbojq5JQC5nKEXYClPruvDzHMjPazyQU2X"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.dec18df7.0_1630312131501_0.8678491480467347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.61fe5b17.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cAjF9Yp5rbbk5mcynnotfXvWRPKOTKF2NOrO5ExY/qtYtslUeWKQbq/TDYu81qZjWlrStdEWHyAJgy69wNpuDA==","shasum":"e01a18ead7dec70a48fb32241cf72a7ef8fb58bb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.61fe5b17.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTFnCRA9TVsSAnZWagAArqoP/1FwXTB+cD6SRhrK8d3/\nKIKjymgQv30ggMiLQPg27LFgW597wgMQIOpPLmia+vH7XldUvpy6sNDjO0zi\ntlY//u2P1JIYtnrYnQUraoQFXwUhv4dBDiygG4Yi2Lxm16qopbPcJb7CvTmF\ngKEM/0F/9CAbTbYRs+kHBOFKphG+vhjudyF9413qTuQJPISHYhB3U/SlHNha\nED2uuKKsEZfIgp5Ax51DKPltjLY5ux4wxTS+pR6MxIYdDWQxCVBW5MfnD+hf\nxOf95i4+tX9vBOB9nHcf/zrn1hESwMDlYNRq76rjsV58g6s2q8lK1IoF0v1c\nRA4daMNh2uavBNb7Cb2fXFwLt2fRKtGIBOzcSdKoSNACoep6VrkpURpWIcip\nKIuDL7AXFxhKNhPel8pMeLEuSvD7l/HkyO3SH56Y6r5SxWmBuDP+DkfnlVJ3\npAazsfz61tFkwURc3E+bRYvHTyJtH7YkOIE38TS2u5Pt63/cobSS4NcaYIv7\noxPwTM8f4yTCj5jMxfer2fug8/9PaWc88gqOOb+1ZVqcg80CUS4NDIcLWX4g\nO8GKXHFhct/jNIvFEpB7v0DANU+1hLzvgluPaxYVvqhSFgOD/QiS7YyMV247\nzvaZbVBj35ADlZpVMwbYw3/kvSAXeY99tVli07R9RFPmaApVQ2W3GVHDpAr7\n5404\r\n=5DGl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwXgeTp8ReuBuU2xSezPf+U49Pg4H4T3ehl2gWXpdZOAiEA9cXGrVFEsXcGjJFbGSC86kAE7gCCO0lV2oJ3DYvJW5Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.61fe5b17.0_1630351718954_0.4321324754812359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.a8c31f54.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MrZYgv0HOhFYdXXvPCRaQT0CG4yR5peL+jAeD5S8IOVZ7+T5xyRwcafK4sF8NzLODNdXHERwLhCqxufqPs6JyQ==","shasum":"cc4973b7827d649f2593698268e2ae3edd6fd572","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.a8c31f54.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAhCRA9TVsSAnZWagAAms0P/jsSlnu3tJtrG7eUPcGe\nQL+xLswZqFbo/yCncE8+bj+zpNoMbnLkrQNbVBqeGx4tgMQutMxpFrGVVu/D\nMXkEQ9kQ76bDYb8vDN7u7/ZbEfDWC4uf3idz7Fpzcpco9YdPtWL+vzk3Nhzo\nDHmSAaKF3QuLnKNvPYp4ttcvitBJ+rNXCC8fwGrZIK1TasctKRL8iuy9/qDu\nJXtaXjogAX84ouNT+Peqg6IlgEdWHNXivQBk6n//zmAgv+FpMuzXvOxnEdYM\neYwm4SfjWpntT0IODvevuPbsiIQg4vuvzFD/P0dAV9AgE2/VCK1eoFVH5Kf6\nM+eyQllzTDBXR29Bp0effbpnjDyBLWrNQ75WHFpw5r5/yEA6WiR62omPUOY4\nzb+cDU4iE9SqaEE+mckJwbadyKnJBCKdWdL4hJpitEhUI0zAREZpHC5nY7OJ\n+Gwhva/7dTA6Hqybbua/aOTk2N70N/oBoJB8xW0aX9wrs+9BlWO+etS/rdci\nTGWNMUg7DL3ieLKDSEDb0Ropicb4/y97kgw+RNYG/QVfMRL/5KMFYXHRBwEw\ntDrNl8rd1mMgo4U4ALYIQ0+BSEB8kWHQ165PAPCwsGsjkQFgECCtqr+j9Rk7\nqtBHb5U4E1qvpt24XzSJuUWKwv32bcC987ByyTrbqeVIK4p/zhmtZBOSsPvT\nMJbK\r\n=poFA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2HbNSYjE6gjsGvIiYS9R3MPwdMO/BEeUSUWIuHi/GsgIgKqj7Hf7xTcYJRf5NguYhuOzNGzLydZgrnaeB+YIhhQ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.a8c31f54.0_1630355489326_0.33006143389292153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.a096dba8.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dusnBLPmXY5yTkP4I3SyyZdiDcyJyHIgqdT36Jqy3GnlsAjm1ztsCIDjm7rn2JUh2SxIsgRnv9bMi+TxViLbwQ==","shasum":"0e8634f1ba3798cf34d211037906b460b5b329cf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.a096dba8.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrMCRA9TVsSAnZWagAA0UMP/2mTNhAQe5nTx/b/xWoN\nbbh8eCow+syzVsY2+HkZZbfnGC5DICf094Fl0iTz9RP91HSblN0qrAuBvWTt\n7DO9LxdRbvFLoah6fXpLSvB1Gw4BiCnrkK0It8pbHKS92+FLwTdwn3RTUuD6\nfMo3cV40AKD7VUh/6jvMu76uhFCZVY1uKhXjNutBQBDDywr2eHmKergaJOUd\naDIMZP3rQ92V5T2K1UmWrX2jF3NDlOLt7mh9Npeg/veXrhWaF2avqYHngKoe\nBp2X/goWtP9PwDF58MQSLsyAxB0ojxgXKOCQQuXSY+rnWF0LZmPERzLlq0zn\n3sv2V8LmbFp/T8qNxsZCf9TzSnBiIMWwR7QILTmHYNT/jNA6GGuVThBwKclZ\nc/4NWXkEtS+cIuzfUP5GaYojR1NqfMlmEwyBdRy8Pdgt2tj3jGG4jFrPll1L\ng0+VyOoDGoQDxuSR2C8ck3HuNZU3LEVKOKgyJTeQfbfbkBD9JjWzYtWtTtQ0\nZkie4B83hks0l5O623YiFEC43QajeFp3eIPuxZ/dJgnap78w8Es9239GqnVb\nDRsBdZ6O/IE0ax3nYbaazzvR64uL+5gD1Eesx32WrpYbTEeTPeZ0F3muFS73\nMEfBuGdtnXZZ1TdubzuVPhsEg6rgQVG63hPEheJZAqmKZNc3k8AwhxHsq0Vl\nUkt+\r\n=NIQO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH171LDhELLbN9AeQuYiBBN+PkOsvUrdAVRpjzqvYzRICIQDVU7yRMgVq+hnFeCI8NrO6YuY/4PE9StxXKJJRTxd4rA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.a096dba8.0_1630448332482_0.9128708262920964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.7ec04d47.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l7zUw3K+1KBLkV4ZLkWNuhhLPw7MHI3VzL03G/wAoQ8sRZxXna+7brMbhanVp1aTivxZy83j/wgdaW6TebcTUw==","shasum":"2e8358acd2a360ece79fab0c7c215ecef6dfb00f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.7ec04d47.0.tgz","fileCount":16,"unpackedSize":61681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1mCRA9TVsSAnZWagAAPrkP/0jQcgZnKP28wxVifQ00\neIH2qFkVdWGcFh9z+gQDTBLlBRnQmfr9j9AESa86RcwhQLMJm67fLpUEYztF\nLGHfPjdfCu9nJRrTG6MjY2icP3QcUj6bukLNRaOcgqk/dd8OOsF7UjrFC7yH\n4AsdyooVCmorTb4y8QUkdb0byMipqlU6u1W8hyRSYIndTqNk6ePUXhGwH1yq\nD+bIh8bdyNmLoC2cbxslz+LFmm3yQ7xp1/NSnbnfE2ola7F5qFVUYv/mlWTb\n7n0jnIQckZ73kwdVpYd9kXg+3uWyZz6aQeZ9CJHMUH9mViXfUO7t5GQT6PZ/\nzagIW5l5X7dlH+0x0aI7HQ1LhBrONuoMFHOgP3iFwlG8ws5Ud8ilYJRvLWa1\n/oT+l0OZ+6Ed+E3IdHThmKGFOXYYHncg0ntk4nFmQyMtTSxFYdpgTyD1IvdQ\nzHv4iZIcQ0PwsTsDAG7QP2joLrV1Z7IO864IOlq2QetFGVYHwBatgZ88xfpV\n5RWKbFM9D8BTFhsNDLLRJzCrTpSH3SSKmsioChZcAJKfHfwACxke2CbPL65K\nd7GrUSK/Li5lOWvW1smfyDzc1JJTrUaN1UOkR5/49HxMl5TJmYFNCdJsQY0r\n8w3Z7Hj4ZFffvHqNn70PjAv24BsbsXb/NyTDxFz7RSi5Pe+ennP6HiYSBNbb\nJRrt\r\n=ENjC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGA0k3KzxljEVWtlrZxW/M8Jb3jA8NJEItmI3ipBHEzFAiEA5WApdp0rv7gdHP+69f9RzUkztlCP8Jip5hJtcAuRzn4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.7ec04d47.0_1630625125982_0.3675716417569017"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.d00b098d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ew1athHO6XUHWClUn4Dy1aed6BoLv8jS54hvysxI9vPZun4VB6MCIRXDflNQdporb1HKyFfpaxyWn0xYb4QhTQ==","shasum":"bd2c56ee0cfbea80417b2047791e986ad7b24870","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.d00b098d.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMPCRA9TVsSAnZWagAAAboP/1Og7bouYsYew5bI12Xd\nuiMZOODgSAODA2hBs33lI+IHKVmzTY9cXYg67vcc0PFRWPJcRO3i9pO116Tp\nv7GV9Dt1E+y51eFxmvWPd1o1569+oQQcHRN1s+eIUzo+tcd84yrIh1xKvxTW\nhXFakmylF75CRJEDXea5enukSN0MynW2j+pujnaY2qTTW49m3rphj3jOVIwV\nf0M0JSe31j23q+Oem1PUMzOhw+oKEkuydNQ6jFK+jvUYc38EbXFI+FH1V2W6\nVyT1KwI1TCtrYH92yXnjqzz3IafLYoOXA3AX54JErjMisinFTlfeoY13Vno9\nH/k4HTYya5XTQDIOlk7v4MxfKBC9A9xOUjt0hYHMMglKGnAeZC+wrLoXdsjF\nvIFeD0QWSFOqTx3FrC4fq71CWAqgO91vRIF8mDJ8/ZJMiJnCgJJiEh956Ur1\nUf9WmYhRu/a1gwbenM8OQp3y4Zpf89rcPhhfoHng2TrjoZpyFjoJ9alLUAoW\nQmXPY9EO7LQnDVKWiwoYPIGiMARJdys3GBBz9IVURlniu3xTiQPLfApHZEPq\n7O0KtcsT6pAVpvAQ3PqD/vdqkDXCA1ZcCzzJrYmNY+yo5NxxI9WQSjgKhpns\nKy8xZqhjrhIJFLF/md87ayshlS1lJ2b4c+gLPK38l6z4vUAcvRpetGPV7ENQ\n1XUd\r\n=QsbN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9umgXsQFCqng1DYFKQEwAxaLauZAZ8G6U6avBBWGn5AiAIhsLsebN6y67Dgf3Aw0xbKvWJasKLNpEoFvDDpCam6w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.d00b098d.0_1630704399851_0.5614355741071106"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.f29b3352.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gjlFJS6K9kzLMzMqwozKUiOxfCXOZaeec8WgmGWaCN2QszDclLp89AGrgmppryT5yWr08BZ5T1rzSWUxLKiJ7Q==","shasum":"b96a04b7cd15dfdf8bd0106789b9c12372aab594","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.f29b3352.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6xlCRA9TVsSAnZWagAAtG0P/R9yKMM1tNa99HDnulaH\npZGaRhH0RYue80iz++/T3tDZ2DLEC8qmxTdD7RAY7qCo9+Yc4sT/c2+RyNKX\np5FjbHKOD4Vj/cZgoJ/CH4oKFtxiZ9Iswwacc5TvFwtCduLbpXixpBEZ8w2o\nB3QS2cd23w2L4TX3Ui9pQKnw4XtXa1gVjZFrBVOsVZi/tqjzmQbpj0E9Xe5B\nQEntbF0nV5XWIc84/BoM/aGrnCj0xq878rYs3SGbdNo084L5zyuIh5KVVH6Z\n0Hb6pClwofT++zd9mZe8OkQLxUPSTmdKz78O+C8tnQLQ3k4iBqpHkTQuqbj0\naWmozAyVGPmAA50OJvv6dLIzBAmPMt+9+iEBWoVyP9x2PqyjifO3KEd4mSOP\nC/aV/Bedt6TV30e3nOmNOdq/XXiay+mPn5Ov3Csd48YYtAt0gNpD7fbNjuZy\nT19chbqQ7gdJftrr5Ip42AKTIz9k2FfqLdWWNbibU/zgEp5oMv+aRvHjBwQ4\nJi+Ujaqdmyv0ZMFjFmFyA9CgiapiZqZEqLFOrcrWsRSj8sTJlzagDu9Knmk2\nde0a3aBlEMbsxqjaWIKD+Kwv8s5D+Jaee1OERKV3Uru3izIJRw2eJ3utdaLj\nJtX+GFR4vfZX2iCHIaHHrhOL49SYWx3a2niHeAtNvbVzb1z48MtK8DDODD2u\n5jgK\r\n=q/nQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYPZS+MVIPOaa8E9MoGrnFaldxneRfOmmR+vfw3fkVaAiEA/fiWVerDs1Gjh6kvTzQ3D7GwZhcdlI7A9nyie/Yrzeo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.f29b3352.0_1631038565833_0.8973362650182164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.4962a163.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4962a163.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UTfXv0+jgaQpV6k0+EdxuXSU80c30l2r0IWfva125GnRCMNL8DWv1kcdKxxfE3nnL50cWb/Euf7qveDN8kr9kg==","shasum":"b7b91ab0ece0f410fd9991e040ffc6cc12effd46","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.4962a163.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/tvCRA9TVsSAnZWagAArfoP/ibixM8NP2yZzYLEcXiZ\nK6pyukSlrqSK7XXXH7mxux/u9+TMaLTETAN/1IHYwXO617TyjplR4QZ2ZLmp\n2XHvDF6gvUlxdLphdXjup2eVfYf3WiSvV3glwSqQHnCBUPXXYreUJyjoybNO\nzZ2G2rBVOLEEOnBnO0U5od/XdM4WcjL7lfrG9thGURjJyGZwhkc84eHosQWV\najGJdV8qcMUtxNc+gWKyThRk+796EjOlrYftkNDLWiFSM9ACFkPLa/cs6vaF\nEHS8GHiffGBI2STYoymKcCSx63GuG3wBwWyNQE6g8a2m0mdB5i3FGYjYz+0n\nWNHF4ZCzEKkFXjWCwiDbYfOOBHgMCbY0yhGHxOf3VftvbOSDvNyseUme9s/j\npWvL6lI7/ZlXJWUdX5YHOqbsBle3uQP7cXOXQtGtyydLTavYUIdNwqnyNGhn\nz4BjX78bP0YkTvUM9cI7BH1aWMiMunoJ/kUze74TtyLGizY/Ln+csLWcZEPm\nunVapGFc/H3kgafGhIvznHUALsA+LvdrbuG/ms/aTEXg3p3ZC3dkL3e4J2Tv\n4nfi4T1M6OqcW4lwgWozQyAsRUDkBxkOsMkB8cLcjG3JLdq1Qv4BvPxqfQGC\n5cLh3xxm2IA7vOoYpl/EjLi/lzH0LSRlomFeKuc8dYNx2czjvuiUN71Gm8RN\nfFt9\r\n=e5Ba\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH0fyMGRsTn9ZID0qxgXSzGnzw/zWKsmwEGLUh5szcx8AiAqYqcY7k1NyaIhpNT1ZVQi6xzcc8ahonAjJ6sHxwGmJw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.4962a163.0_1631058799661_0.30051653758750296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.33102bf4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dSacjhojKOUUf7mGdypq0zyz1UHVy0HLW2y/6kVwNppWtQN+tZn+7z2SNFM9KcdFHnW7wfxMmU2UriO6bnxPgQ==","shasum":"dfacba833deb79463a5a5698b359d61bcc979ac7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.33102bf4.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAAqCRA9TVsSAnZWagAAUN8QAJ1q3Uh6gFLY7eyTyUTE\ns/POvvK0xm23syfGfHz9lZfyjFZp1tc+XycgvV2QAyw0tBqI67vE9DY9oBcJ\nAh/vVTWOwPF/qC6AKbNsTLfMozaAGq/8lI8pJcNxfDgq+yJY18yCZHo05Urz\n9BMSHH0dj5Jv4GF4aQo2Zq0UaiwIsJQqnjcZ64lQho2x5AEQueTKJIwsrbHk\nVt7ZKZm/P9sFh4tvIe679GYxqtZSXgj3nYpmstRMvw9b9hevdcxRaL7S1Vgm\njJst572WM2CyOUdP1jy1JfutnOZiW5CUq9pGlRLycbF7wbNWGCq9cOdcJXUl\nePqZpqk/OM+pqLp1h0NtOMSD2kp/oWqHYQUoUCT8TCSmZZPY/o1bKTZrCQPE\nphTswvgp1HYBy9IOBJvHP4s4xJZrfuXOPYVjY2xoYRtpa60xdIB2dmJFZ8Y8\nkpER0QUL07p3928mKPetfMA1GVc7iYiYh6uiuvfm7suAlDhT284su1Pe9zAy\na1PiBrfg8pwtq/iOyfwRDtyfL/60jLCT9nA7esb0SJPUfWZQF0TTsm+tKy87\nOrNUQrSGxVGS+KaBUJEpaZPq3y9amfR/lD5xR6gMPfmXGVVGEXPwVwAXwkhJ\nWNGCR2dPJfk1F/oO1nLR8UmWAUBd+c0vnGLcpjHA70tC1oq7n+mplJJZpr3R\nQdUx\r\n=U1tq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaE7tUJWIImC4F9PH0Qe66dv0RAxgW2Y+wgec3rnuGHAiEA7mEq3RDdl/QHJ0pvtCUh/Bd2Yj/qR+7covhClfPQGn8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.33102bf4.0_1631060010276_0.4309354071732614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.76c68381.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.76c68381.0","@material/top-app-bar":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.72464476c.0","@material/elevation":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TO91LUJV1KkzmZeKReeS5cIkZWzaEG5xJycaZuUf397cQWbMwBLDno1Ovrn9pNLjGpgh3DUijAshSujhnYvLxA==","shasum":"936766eb66b53e21666d3dc3b3cc0fce9c50f69d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.76c68381.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORl2CRA9TVsSAnZWagAAOaIP/2C21O5kFkr0gOUYPb2H\ndnrt/OzmqHMo+ZBbTzlH/cdsvvX9eIPZR4Qn/ANEYQBYNSfQ/c9EZ5WJW/uf\nGVhB+IJNnZtJFM+txV2gcEuvxJnJZDbftuGZLU4eKVqhWTNdgnN2AH5oqv3m\nXBkcfynl6Wex35paha0vHhlWHaibexrT8K7guHwMOM4zW3zHrKRNWgJDIAPn\nTH+aFX0eg6VzQ1SBdjt70Zpw3oRBebVEyFugwwZNYx5X1Ec8snS4NNuf0bTa\nKS5R4mgpOxr/9sdZorkANG5VpwCR3GxpbamVeFqUV4A2N/r8tyqxEqEJNO4O\nVyUEo7uBvZ00R1lKaeLsa78sig6BGgECVOXrMXZfZVApYCp9P0vuuGHc+1aI\n42PEgxIadpu7qnaI7qUc2ICAXb3nPB1Jyrhlvk7ZNNM5dvJQVCYDfZs+/L5q\n6cA90nXbukznBJQoxSgHhhHKMSNLMrdBMyEJKDzqOcwvn4oQSJUFSQZJp8t7\nnGumtlLhwwY+OMMX6GM39E/41POn/IWCJjErZAmh57rcIe7h9eqsTdsBssH2\nvsscC2e9NDdocTElC/PjAtdfkoe+5cRA7HTmAKhXeaMdSf4IxqMBAViuAgK6\nuRmg18E/V6s8BRYZqRTdV2ZjTvXqfGQ98k9x/6R6gSDxNoY65kWDfYuAR2CX\nd0Os\r\n=+Cy0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwh5PlNU/aXHyDqlgBNP6hnxX5JStBXWxzFdPgQYKybwIgfcCHEPk7lc56L6Tod1gkhh0EdXtw0TXC0RoKxZubfrw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.76c68381.0_1631132021908_0.165923148794916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.17d51f76.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/top-app-bar":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.72464476c.0","@material/elevation":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4rqzfzi3j1u+cN/j4H/F2kYuyiZNXny7UKiAiInS+kp5+oVjP1EBBgJwEUGdDMBemBPECCvzvHVh/P1amzcarw==","shasum":"0679125b4a63cfbab935cadc5dc4025cb5ce51b5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.17d51f76.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUaZCRA9TVsSAnZWagAAzkAP/1i3JsM5TrHLkw/WsQbR\nqHoiMn8+qEAD//9mQfFWZ2WeeOmS8m1ciqbIxuobmLpkPYbXcBIR/q3JSQcb\n52xd9gExvmjbS8lZOK/dvULPQH9te94/vhXmL5mVx8bhsp2xcWd+aL9mz1Cc\nHqmwe4RFWcwoqsf5HEPTUs8k26Tc0mPnj+G9c+BCYIPY4K9wnsruco3nDFH0\noRzY5XoxGSlLwboV82MmMJFdKjQqH9jNzXxHXD+set93WRMgksX6y0yYC47r\nX3WosJRUdgRvJU5fE4wiBzwgwTbZTgFMQVLfOkJlhRzCmpGeQxMbTsjbk0AB\nZpnaB2ZcU7eavrJmlOj/xFH7p5ql8Vm42ouwcDqWxpR6NflTfNxF6KLt4v5k\ngoTlaUjXTXyvWZRjWUFUhLimx/B4TzB8jSz4dIEBVc/bVTmxTCZO/RpeGp5U\ncO4bTj86Wi1X7mW9Db5FZrJtIbFQZesRaGJFYttg0dGRlG4m3LrcAyfbACFh\nPoz+AvbIn4riNEKWIfhCB0LgOetkjpLSsAmvjAvwRqdEZupRVbIktsu15qJ0\nSeKXzBflXhpry+AH80P3LrH9hHjdHqg944yE9kqEG7P9vEry9JELFLexOiyA\nj4H7rLW4XRUSuxZYMC4r1mg3L4n5q4rJFWI89A9EeBwV4qNudijZbcMhM7Mi\naLgN\r\n=HZAu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqu17Qr8nCQEZ9I69eQ0RFT/8kzi0HgoTgBUKjdVEqGAiEAm2BJgMBj86VFWT5mKda0CDpJiv4aPluWK+gPGpsciSU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.17d51f76.0_1631143577106_0.3653073521723793"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jtbpV1vxKrGJq/hCKo9FODDYO4ClaE9xJRq3g08ZrbVCdBFkxSTbb7ZM6sG8j0yVPdz5UazrI6sq8V4YzeOoSw==","shasum":"74c059769cd444db38f98fad56af7700fa582e91","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.3fae6c2d.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TUCRA9TVsSAnZWagAAQLEQAJMjK6ByJJfaZKxBpOr0\nUOYaxxVMojO1qRIGHOAumxuvvMBrEn5rPZCziZOzP1KcxpEeU5vWZvT9OlEf\ndJKzaTH3IR7t7LWNfpCBTv5S1/D/iNAn2p8GlEObBTarJWSwm5s4eiItES+H\nLp2HrQ9mlsdk7r5gUKw04ZOh4eD8fx95ZXu9JTReKP1R0vutHnW6wV3W9IQG\nEmJIZJpylR7sk7mCjzePvGuV/U8FjtGCuEDNYGhJw9FSsEPYI01LeB7Flsjt\n2tm9PqrsNiOYhH6+JCa6fm3Hp66l8o+3QyPUY1vj0lkeTqWqubZRrauVlstC\nZIOZwMR8rpAiUjgZIz1uv86GtOiZ+zqcnAojJuLcdAJrUY14v0sssiP8g5SY\noajUZimdu+4V5hEVcPeXOtLlbvJv7xmJl0ZUzCtBOqR+tmbFzZstB6YUfvhA\nbv8KEY6wUidaPNw3bRcTqETeZSOgaIA8d4EX+uqfqVAjSKwezSaCNoJn3QNt\ncCygbExdfj0HFrsbe0Zac3WXcwXMV+nF6B7FAb6Nx2ilvYokXGPTZKv2H3FN\nIDYLtO9OoV/kQpE2FvRozMnNhGWMwWXYzDbBPtAO+kS0HlKSW50UpGm2fe9S\nIKwPlD4efilWw1+Oq87TNbwzCDvjLm3Q4JhzurU0d1WbYclT9Xoz+x95evJV\nePyI\r\n=Yfxa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGb7ntG0MBA5/ql0Gje22Ug2BV/PzAi+GGdwotVIQ9b5AiEA0jHArfsWsR+3X041bwJ6SmUKEnlIMz+hL21gBRYnXgY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.3fae6c2d.0_1631298771912_0.679992042987609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.f1958c4b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Mlk6ik6CR5Gg1G/OXbnH4+Q8GHl90BFG/ICvrb4z7utNOuu5Mhlr8I6GGQF2N73TWZW7gFFu1CXwGP6I3pJwNQ==","shasum":"e08a0d40ccd906f9ba6b7d453f275eb6fe7d8b34","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.f1958c4b.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SDCRA9TVsSAnZWagAAQXIP/0PES415xPUKcYkJ9Sia\nIeFmPd31Z6xf6X7AcQ95FBKsnk4T99xtUeXy3RHLU9CEjlLtGDmWm5DeKH55\nJPcLgVsbjetDuES+IOK7CyECgldenhPECA1K9mvxLrWz8U46pf9t0y/TARff\nII/87ijxbRxw71taTz4+qvvQv7W/f42HkIfrqW0XuhkCkFfnW3vduszr0NhO\nAwq8oup+v1usAiIVRAcZfYqGH00gcUpp/RLYznoYzCBBFkXop8u/P6/wbTEU\nqmN1V1vQJetYsEfrrN4F64VmU0tsmfGdciazm+DLgVteJcYeu1hMVsXWS0BB\n8IToKGgYkNwMdHKIKi82cPnV3FADGa5UW86XNAqSXkE9jB/hyp+NHxAA4bK3\n91Jz5p8FRecx6DLiPAxaRy0iNgTLpDP0oubr48d7gnhSgSNAyP5HjkHqkDVO\nH0jUR0JuVl9jqDoajxhX53GbLkqV5sdl8k2ohLM6FUiyfFZ2ezd/PYJcXT7m\n/m6raei4has2o1rnWg9RbNfu7VOy42bPeft5joSfjYbPGsYHCb5GaZl43SgK\nP0hyWdWhITFFSLGYTSyL5wUndo8zPYyEQ4Ux0CWu7BlCcgA2yM0LXBw4JjTI\nkv3/Dx4CCdoRYvmFLh9eSrh/V6fa9OZGRmrg5Sh72TFX5LL/2HERMoXA407U\nfPsM\r\n=fjha\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCa5u/dMET753j0WtyYTGS0ghIwYVUILzQZ8Qzn/uZlCwIgAcfyvvy6388qagwy8DIgHg7SG2EzAE2WaHo18fbLzqs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.f1958c4b.0_1631560835147_0.19904835497015871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0-canary.78abbd59.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aziBsKTmW+nMBllJUuG97TqDbT2KVXXJu1RKqIvOjdN1e7vZM5e4FAHGiaG3uRTOc/GoA12IeS1cn+pz8XK3uw==","shasum":"e4ff77cb70f6f17f820570a6324382ee4119b7a5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0-canary.78abbd59.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8H2CRA9TVsSAnZWagAAzIUP/j13bG4hS621skqlDPN+\ngedzdvfrSIvnx2HEmj2hHvnj3LaGBx9AmPsIDss7dKaONtElVV0C34/SJzWn\nUj1ixvAsF3uGdSppG124K+SczjtlzrAfTkNwFD0uR0AAE2YjSE3PIW+Nofj8\nVG92Qrb1jKRi8pE7iD4kksQQ846mJXxME4Gdc90GdpjYjhaM20n0c+Sk1aYy\nUfMkkO5pp4BDsLtjs3sEMTLSyZ454zsyxR7MP/IgGbqakdQ/m8wz2vdwzuR8\nsijrwWDkv3I7wnPQP0l2Qrkuigxid8T2UKjOJDfDnjZ8XwuFAutHnNp9gnWn\nrUB8ZGQMi7LR+fnpIkdiWF18A692HFtGJYh5dNDojm84Nz/U39R5EdNmH8QP\nSp09JR2yrWLWWQYjgt9xQQQEqIbcLftatG7Seu3cRu01GNazLqH3QSfIsTeE\nVZbs4b+bPYCFZ7Kih3JiWTtXM9Z/Ikfu5UwrYVpocNp6aDXMeQyt1CEWHt9i\nvLFLoEn5XD3AYK9FXowgq3wMvhmHGV3NUoLdmOyIwyb/0LIveQo/Yq6qpP7C\nQOTK+I3qUg8uwcDEXfQmujjNMJx3LRI2t7P9YA2jWSbIoHCc8S/X/Ixz1BJd\nN7LDhneHnhPehAuXTulWIF+qdUP7B9YP9nN4o674s60dZx+mupaEGWhsLiZv\nOHKM\r\n=bnVY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSyHvSrM10lAtxrEqWWrlpXJ7xtMwkXDniO+FiKmyqhwIgKWyUfd1GRfFs9fE8HlQBToJjpCUxBmtWoQNsJKyVjrA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.23.0-canary.78abbd59.0_1631568373936_0.8115781850068096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-top-app-bar","version":"0.23.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.23.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-BW0oDnRRihVSYbsht3FyX3HWeKWRCuK4xUoQpiSIgZiZ0pnjOY+ocAbeUlE+y6WFmtcmGk3oTG6TjkZ7MUhzAg==","shasum":"012e71c13f707acd7d6b88b176c32cc3cfada882","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.23.0.tgz","fileCount":19,"unpackedSize":80444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8QxCRA9TVsSAnZWagAAf3wP/3uHT77cUebW2r+twYei\nA8MNS4Im1Z9hjPgbcgKNg+oFi9ErhjExrPGiFvALS6+b0C4NIrT65s3UzZMP\nQ6RI7gCJOLPcr3OZAcamLAAeIcxDKsM1IFwVKy+aXPLYNyTTwCg3Y5zkOhkU\nLdT3+WhjgnmZG2q4520IpeDWOrf4fkDrL9kQGl+yaSUSP+PXz80g1M/uWwex\n8/ZQHNO6MrtQ8SkiSV/J3t13bMkFMUxkNAOSCoFm3kNI+G1bDSAwTnWtcddW\n8M3wCbaD/JjQOvfQGbO6aj37tyEMEyZied+iU5iLcHTudMsscHLBEAlA3Ap0\nUN9rMoW8+ns6Y9wMHBDOaMuDv/W21ciwctx24wO2ggSjh0RNnLQQJbSXiZUS\nVha80rDyMxCHoMG8JMY7ctKd8q5/LFmhJ7sYYK/iJTKDE2xVBsqZe9AnPtXz\nr5mw+/oVEuIIovfGs74WzsJzIIKyFU0wQj8Y2CDawrEc/rvBBd9VfkFPFhva\nXiEAZzsnt5tqtLgSBr01pXgMiQ4DIsM1OLCOENuMq1AcsLnjBDhaP8pk7wG5\n1cVknMaHp5D/Gx5O2tU5IdD8Tezcx+ctatZ/i9rfMKzlG+N7AveIOyuxSXfz\n6vuhauqalYbX4uubDqiHq4uzCqEfRSOmAoJNVNxtIceFJrmIiKubFry+mwPE\ns+hG\r\n=pUll\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtKjtoTtOVQQx4ldOZ1pfxj9fRow6kgnhvSUDq8sox1AiBII5vkpmgf3n2yEcxktMf2zPmBPIzq3e1PPpQk0+Miew=="}]},"_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-top-app-bar_0.23.0_1631568945834_0.5881524836295986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.9830d665.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9830d665.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ApD493mkp7hJaUr025oqX2wJZUCFwogdSRKGkdSd2fd950PWnBCIPQYS3omgKSBTZ1GOYPXhbP0T0tlmhjMlZg==","shasum":"61fc58d096d6ffa5448ed755efa0d758fae764fe","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.9830d665.0.tgz","fileCount":16,"unpackedSize":61585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SACRA9TVsSAnZWagAAdVMQAImKgvKg8lvGUWF4sjhx\ncvK3vQimEMk/CDDSHkG6M+YZQDtMp0OL2AfQxztqTpBLlxjFUdJdpGWjh9L9\nMJA1MdCxVudCZslB+kUsckjOitSLeeTMqInp7eoGuFo7/BE/kQrL1TtwYWt5\neR9CDRIokhX76j1Olc2vCj+nwbVtGljEzhA3qzZwRdkbT5i2+IOsJiG/WRgE\nNSuDMg9OHr8KIVPiUktaqM4YmEN40c2ObxtXsEbZd261QuzseyaAeTQ8666V\n16ctTbwukxIFFAyZPHci96M37T7bTcxETUfz1hDJPtrKkOwNAp4KsM6UTX4F\nRIJgRA5Y0yEmfKMs/+94GRz6Dl28bYlrbXVjrLHpV7r5XGzJg0L7xr87SXz/\nNJoAIkGe/K9NCWmi8s+7H6n5FKGZLIhWqEWo8cLkBiN3NIx2+ZQrLQIFgwsA\nr1fNb2h6uhanlBmTXzDp3PvRlv7dJxKm2ngDaf5k2NEDt1/r7xDlSne5y7AW\n1HEcd0mmbSG2985tRIpxFtu25P5W9Dm0w89W8zIxGLOyiXcu5RTM/ivfcWj1\nCAY2sLc2Ma+xudml82j1/t3ECXLzk3CxKKKpeIUZTtCf53UJ9KEAzSM+q2P4\njMlj1DzCaybJgWK7hIdmV9xs63PNzbfnoTPEMzIysN1LYI13vOvPXOv1CZir\nPLCn\r\n=KCLj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrHzXzaz9h3kends5y/OeuFK59/YXZSVEO34t+i878MQIgU36R2JSBlQENiYLX28/cTilAnyySKBDlR4XVynGWHdg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.9830d665.0_1631569023912_0.4133092082907319"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.20e2081c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yJKVaJp2Q5yWViqoe3a826eL6EuzpAFCFBco4ZntsgB1gqrJOe2Cb9vvHXogKqz+TxyyK3lx2r+4tXzMRTElIA==","shasum":"72084956f1616726669e7515d40749e77b2abeb2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.20e2081c.0.tgz","fileCount":16,"unpackedSize":61593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP991CRA9TVsSAnZWagAAr4IQAKE7LhdajYg3aWD5kWCQ\n8MsEzpOKMsQKw9kdl4Ft1cXlkqSR/0Pqk9K1/lU99xLgJ5+++vClgHYtrVIK\nsdsMfAVOZAFxCaLI9GEonm8o9x8G7fIIZwFeLYio+alO4r+0RrWYQVgvap+s\nxV9K8OTTF5+UU9XLsP77PRaMSA4pcIB1GmsCXYsB0SYpgZh7kSdO5XP/ulJc\nZtp64SnUURqHHimnqcEQ2oas67i0+vwumEgcNQH20qtvTwjgW1DcSorlM3Nv\nwwj0bxPizPGoNXue/pKNC2SGGCeJhROR8DVR4e95vnBXdKTqDbGi6j86pe/H\nAt5k+zTG+cKM6HSyCvwus9RKNJ5VegzVH/+0XJgoRIutftJmmY3YBP3fr+xs\nS2Y7p2UUPf/ihzutWv1YEmoTa1ijsVHpkPt86Ba0iPXOHWWwrq65nSFkA900\nt6JiECszVDvuVF38mwBigdZCFhsqVjOfAbEf2jQiS8vGtbC1SyIbB1yUh5oN\nMab8FQveWk0IRaPQ1vbzWpCn7w0iTu+HDdgkqbU+JDQN/P+vBbRFg/nqrRE9\nwGuhr2P6i8jrkl1UgtGtBbadLv6BeJ6FfoAB2aVdqKso8brVnNF26zlRBHrh\nd1oPzKsSKwUPOuIAyqQJ2FkMw5JYjWAZOSlCdOULYnwRh4l1hzNlJp80+/ba\naNPu\r\n=lZAg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0AjO9xcwtUwNsQtuh/g9/oW4qMDSLOz3Vl36fZn5qZAIhAOMQbbJg343+cKj+LqLHze0mzMR7bn9R3yNhxqqLfdRH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.20e2081c.0_1631575925439_0.11533694257117655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.583613a9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.583613a9.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P6dxn8AW5B8awjm1YFb7IU3WtEqsR4TkAV7G7JLC8k+GAjVRyfx4raJTj9WkiNblIImP2DCszg6H0MMNUWR3vw==","shasum":"318ef69e95b0c951dc6056ad57d066c4f455797c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.583613a9.0.tgz","fileCount":16,"unpackedSize":61599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNPxCRA9TVsSAnZWagAAb6MP/Alq5z6vBZoF1u4j4XQt\nB78RIkhG7F56k86Ie2JzZOAv8eeyR6R+KbVzNRTmc1FeiiaD9MDANF81ofoV\nhSLJAWS7OATjY1lZUjS7VSkuAO0kL0i/okZ7hsmciV0syp2M10cavxphbtp2\nJ4LEOfTHXMxT6u/Gdmxk8bdLCAJB7KkhjrvGmvbvtFH8EMJRRIPVbPGHgec7\nIxgIq2NUPuhYnQM/yYzIltQr6AKe445ZB/GzgPVi/b30+TlZ3Zw+O069YuEx\nvskak0f7JQneMoMOQNf0D3SuZGc2/XTflB9pnkDzqvQb9chlCd2/dDNCG5Hy\nyqd7fKUwIEUmYXCDwcwcdxRxke1D449NImzMUbMw5+il8U5z3cAqHgbt/DYm\nIkrzNEE+wFQ1b/ayiR1xyAO73VPN5gjaOOsMfOz6HvIcEjKktIDI8aGDgWG1\nbpXpHnu8cq7r73/GWxu/BOfBe9lue6z4bjXnJ+74ogPZwOBfEIT7BUuu4IdJ\nEVlIkJ/g13zDUNVnXYHHjrNGJwj2N2v2wH0YjiEkQCRvtMW7IAYlbGT3s9J0\noLQdWyN1I72t/ojCo7AvIygDzOZHa2VOvLET+YqDvsM3fxnodkeXN/90HEEm\nRSVYJu6Q7exyoeWmnE6c2N/pBdQMQgJ5XMu+7wARvgZNOxV9hfWRdKW7qpft\nxjPX\r\n=DHqN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPDrpsrfSJsasTfO9iNYzeWa5zIIIwFI6+MVPcw62gOAiBq/56mlITCpuVhUQBfZbUmfmWno5eT8CKHrYBzdNBqsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.583613a9.0_1631638513310_0.6186550494840368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/top-app-bar":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.08398f880.0","@material/elevation":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QyhIGiQkFN10GoEHSaFh4JC3mDdm1UEvqdabwB3+85OmtNuWVMas/MzNJjCP7euK7CGsC7PBKAwdOsf1vZ1+IA==","shasum":"ff90194418af27132949bf81c6cbe8103d1e4365","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.0e1bd56f.0.tgz","fileCount":16,"unpackedSize":61599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNycCRA9TVsSAnZWagAAXnEP/AkUL/B+KF8dlGYVgref\nnydsTK8h9VkJb5sm1whbf2XVYvV1aCidUswM843PIgd+OregUsV03Yt/YMO0\nf+JWrAC1USXTQgFVpMMm/ESiWqRXN24gaXLqXhBG0+lSnV0pIuG28FnHUrhC\nmbqgXO5oDpdM3e04qbz7OTV0OyRQQWZSLOQ/s+tvF3RMgVCUvTKnuUcMRg6u\nVfc61z/7p2bwjL86/wv1OOgOfJ7KHoJiirtmN8WDWbtLwKV4yPU+TKfbnn6V\nS24WRgcdVjhJsZMV5YmrL7EBt1XMK0KmVS4xW8FRHrKqzDtSkd5IAicXoLlK\nUduX8TBbB9LSwJdUupWu9RiuM7TiFEU3FsK9rjxov4Q5iOZz1rTShOnmKjPe\nJVIG+QTyRIwtC3ZZCnTjwzoiGFW/kc6nGA8le5O01QCW2FnXaHpkbM3Vsz5a\n7uoz4x9kE0pUk9jsFoHoDRWX5PRqTkWT6YOr6kTw7FnO4uxotva075a8Y4Qi\neZfdcd7iu1hX+fh2id/KHzd8994WM4LBs8ERTQ2D7H6HHfk6w44OhOHVMcJz\njW7U3T71fgGoPnf7M88WCiahOSpHnSGmjK/hDgLwqbKnkmM9h2iAJiKeZ7pa\nnojBccyIfu9Q/OmSg2ICoKCRWZqeSO+rbeAJTDaY0HEVmD+1gp1hHG8FEkBA\nw2sO\r\n=O4oh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvLpxXt+eUH7zN2FhN4NBS/qHGaFq2lN5+gymjKmxUrAiB2JoxGubDvXzzJntjcd07QwXWvWgxC8hSKP7Ntgr1khA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.0e1bd56f.0_1631640732266_0.6354856159488695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.7bb1818e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/top-app-bar":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.08398f880.0","@material/elevation":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-InpaUq3NexgjOITN4inbnEqNKnRwnXKhmNIkfCpP84leowiww4CzHtQcSN4kqDuY0Qg9G8QQGJ3Dd/PqFthAdQ==","shasum":"9805788094c5d283cf1ebe6d6180e946f204a251","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.7bb1818e.0.tgz","fileCount":16,"unpackedSize":61599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/lCRA9TVsSAnZWagAAzb8QAIlf3CqjC1aBmU3btU5f\nejrnB51vWsalrbBemhWuwayZwtb1NhfbK8+85ismSaZ0zLt5NGibg3uYSmk+\nd5phCiHK1P4fAuCurN43X9+vAj72u9UqyhvTZMR4ccJ+22+Zyf+YItBwxtPh\nUEIw8wMvXyWC8SXh6dnzhtftPsjUDBY77VCaevBvLv6aOmegRYne06+ZRum8\ng55zwKxWjHZbK3LxF3xA/KfLzN6vZGwjxwzCng0KTEOwjyyjNVBZW59xT5b2\n8eH0K44SNw/jXtdR/RNdl2isCRMSKCYM84jaWQl6Y8FZILYFo4HUHD26VGfv\nRBbLkzrZicWtPK9k0Iz1lbiG0+pp0AwXlWiyaWxdXFj5L/rJApf1BL1cYmax\nsQRQFaLRpgLvYKv/+Rt6IfcZ3TGkRi0mIbXnQ2ASvNKG7m371lTDo6Stz9sd\nX6weGw8W953puJrlY3XYfBv0mgEwvjTv8tU09notEM7MVqweKqJbLhp+AylE\n89RZbt83vOhtHtYvFBsP4IMrC5ayCOKQnEPswnF1n4FF1qCYGZ4c5VFRh2sS\n2GbkQ/FTDHvjp0unN9iM/fZwBt3d52p9zvILSc5giFFikjXH7+0Ukkw1E1fc\nk2g2YYZBnLCLyV2h4haoFSHmZb/hjNSq4B4opctm5poeV7Fj3SOvSvr83AqO\nutuY\r\n=yVhO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmop+2Btykg07i+94ZuMw0sxaWqSHf1cZRO8jwkah20wIgfIq5N7aVdxCylqT+fMJuD5gwjxIgqDMA1B2AoNI4+q4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.7bb1818e.0_1631666148928_0.34372762240993326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.b5e665a9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JiDENIzgMGCOnbJAOX3mt8nxbMW6/pnnfZ+DD2JjemVRz+xHa7vAim99xpH/uy50PrONmJUA62LTyYbyBx+aeg==","shasum":"a47288d6e20039993e99fa674c3536c8000727f4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.b5e665a9.0.tgz","fileCount":16,"unpackedSize":61599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjeyCRA9TVsSAnZWagAALn0P/0NU0QwTogx6JjKb3n/T\n5r6ClXCbm9b9Pw/AMHSip3HnpUeMZJRTKbACHvvqoPIFDfHKusNl/H58LumL\nqe/dJOHoK60szspGfdtuieU2h3VrmD3zoI6Y+dyrUqmJL/1gxpC+P1GU4Jpu\n6SeFzGxasrQ5VOn0yWbH+HgbdIhZAB3Kvep0pzEP6PtJZobz59x15bJ9mjYi\nbK9HeliHCbT59QXz+wDZc2kW2sCI8SYIdPHbgJm4u8R6lXE+DpGXfsGiIonZ\nTw8ON5urkL3Dqbu6iNxYn15VFWYIDJXFslu0lrxop+aa5eDzmA2IN78hFW6y\nfwTAYU/QqZgj3WcrqWTNpDO8kn1p3DSMH4QxJA/TiC/YLbQRFoZyYVuUYnIJ\nM8tw8wEwO68hvjw2Kfdj/MtZzn98/u/Vu5KeB0nKzBUSuUvXGZHoSU54hw/i\nJaf4rjzggB9nCvAg8P4A6p8qid5VOnz8sGyynDO6pRpOMXtTEppvTX7q/smX\nb/AFdd7yNktfUQum0O/7Ns9Bv/9ljYvkLLxTj5vZ1SEiqll/xYxexsrXyx4/\nWRk/lCLmbHohKXKOumUYacClEjblvrf38AZjUpLCHQgsYtUhoEmkBoGjCpUj\nW9JpR/7Jp5OmiCO+8reDWNVmih/iAmnasRm2hQXsGntQ4BPFyAl1lw6hOnEO\nkeRR\r\n=djI6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNAt021xyxXWfm76SYmbKpJe+1OEKmAQuUCmGaYgspOAIhALx35MkM6vXzC3Bkc1QZa2uQPSy85Da3XVaiHtxfkReT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.b5e665a9.0_1631729586494_0.8044461728259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.ab1e177c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e/nwW5YxlpFQGAXQlkHxFz9beXRcd5Skrzg6R4SINTo+qzvAEeLJjFd0or0A0F5hF2WCkpjTIAANsMkK14mJLw==","shasum":"79ec6ffc8b8754468867fc80bfe2a4d39d07c5df","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.ab1e177c.0.tgz","fileCount":16,"unpackedSize":61599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8bCRA9TVsSAnZWagAARJcP/jGzIajFp1BqebPDoMfR\n13eA3UlVsUg23K1Eq+EfKnW5d6v0IIu/R1Vj2X58wgqCEhbcmn8Ql+HtLsBy\n2AJdHJDAYIhiu7rRDZ35LJE5zvQMGaq1r+u2WJrWAfd5ohA9cG+oUkgHhTKB\n5TkiDQBzSfPzIT7JB1XMKIPlUB8hw+6LqWsFRIcrpyHjeKYoMZrkcfTTVa1f\nCznFbQ029jMWBOkzWVzCSaalK9ad2g5lpEIsVHflp4u2h86ttDeLFVJ/nBzP\n2G9ctg+w0vI0N82jr/x3jgIFSNmB1IJJIeHZDKx/BUOb27Au3oSrULdvqYNT\n51oPru1L0pOBtEHRp50U72zMBBp0goGcTfqQWRtMDulIbvqa39ivNdEDCwLj\nLjh5iU19z5z7qTJxqNPEQswnOBUC86unZnOExYErN0VdzMN+q3cUJwSR+iws\nTUhGA8QjSPEtDiqKEOV9V2km+HI97qT94mG2Gtor/6I0nwot78Ab3iEjbop+\nksNUw12u2uhXJnuMm0rQvU7de/dbclkBWCix6KnCo6GEsx1/jUlf7HG1ZAB4\ne0LVGmPq4WE1WnMEvciyAb7BSt9bLEnv0THW+W9QVgf1FyoTYegds3mE42lA\nL8N8ojdcbn3WuqINfflFxgOubY8cQuccOrt4PVsBCcOGZmxXWUvviPQYBHkD\nYSO1\r\n=M+aQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPnSRbnQ9ld+zrWBWqo3CC7oqjvmS80He+ZTTXubLj+AiBZGjp7/SvpA4j4V2Wqjn7/oTjrMuPJi6ijSqVVUV/lZg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.ab1e177c.0_1631731483428_0.30227888918660284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.8dff8894.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QOC+5LK8AlUWBdoP1RuOVgjiVPOEEroiCklgp4O3vgNWfAHapCO4j6Xy8XShyKsdHpQbAQkKOiBlPqIbBdn7Jw==","shasum":"dd606b5c4203389ad965757896cb62a61cca588e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.8dff8894.0.tgz","fileCount":16,"unpackedSize":61599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkSwCRA9TVsSAnZWagAAoIoP/3qiYoOdnBED0uwddwlv\nKIgUJkLG3t0Zop9tGMOxsy+v91TF6m+74/jSeBIb171FWbQ9zN7HV2eUSN2u\n6oFXowcSla+9SHLi0El6SIZCGr8V8jfBXfrlUlsVjA8NkM6puAAdiVP0U7lq\nridkPJWhvRzSQIuE022yuVweyaFbTCf56zzldbP977i1gQMBHlBF2GoGY8Jr\nFwsSWrYtL0f9iPZzwgrH9c7zLk6xMcuAfG1eH3gqpjUTrUwBrIu+CXqpYsHg\nYCZGPNCZG1/FDFX1PmRac0koS7WMVSQcKpVTYrAWiV3W4w8pRStjHbQU2YZg\nBxq7Q2uwTdpP+ZUmX7j3tQhaXFwqzobr8NUA+HeDzi+/94BFPnwYV6mwiY/d\naMDpaWqDB24iYBAh76CaKIBO7doy5iRStNAn6eHG/QdjoWO5ppirIvjISHXZ\nNpGj5VRoqGLwoQIeGGClsMg61WkdLtcmu3NSGAc/iwHT+IlIh16lid76HTiN\nHPGjr0tuwLyhYCiryyNYOmy15uFPZQIGr/mpophJ+YAoMcYz6afbtWObHbr4\ndu2lLsbCWjWfsZcq1xwvhb+2IP0z4e+jhZpb5ZAMuuhRrEFt/Fmk+Qt1E1UM\nelRIej12PhJScUQXA85pQoVdK2u780VrgDXpqacjlwjWMu//D+mfiZWeBT6l\n21F9\r\n=wgLv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEX7+xyQAR5bvHRcb0HT4EbioA353Xp850sB00rUXWptAiEA5j/wmS3DrTkZ7oTFGxVygGfV2a8DrSFRRlOhzwUoO90="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.8dff8894.0_1631732911977_0.8466343519186377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.9cd7e927.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FIx9ljgTLMG+hCqkayx56PsYYHThVVm4/vZ2noStq0JX63EVIWV66vsGLubNwGEuYPZqHAa8F9e7r9xelr9b1g==","shasum":"fd27aa783c19739ee1750537e6eccfc7c22dab38","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.9cd7e927.0.tgz","fileCount":16,"unpackedSize":61599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhHCRA9TVsSAnZWagAAjigQAJjYX9upZ8K1sVWe0Pa9\n3hnLAgtWU9G7RoQjGWNNAa43ssvQ7PA1hk99SVkyavO662pNIs9K6HJVpP6I\n0h61SHSZ6WKtnRw8zTkAbxp1mLpPZTkqckuZThPp4jfh+pcJ539RK4J4TMqO\nOtizHXVnZJCHfeSHO2zf5B0slZtLHEaP+sdlvNPfnBjACe78axUVdrbKxpMC\nkxi5PWjkc1F2cS+4SIwQGhdJ92v8WCq36Pkp/MigHal316mEW8GTfVvlXo7D\nrIjAOqXGEuH5hu6fNMFHf1cQqgOJrC2HHOzdvo+fw+OlDpiXYuV/cwkoeu55\n/WgwsoVxdUNzjRw37XcaK0ZasB/cFgPxkAJDqTC6ugjnQsK+WWDa46SbQiCR\nIM2q7nRWdYkLNfK7+vhSbfztgyNG4/YvACWxTEtomFsTEKHL8Bad1PcExkDW\nG+kQys29SCNAqqkn3ZOolJreFnrh42NGTRqAVqDWP4PNyHkYC9f0IO8b2RAz\nxtdA2OzrbWfnLye8fFDuTV8rf1eV7xJIv2t4Wp/zfAFT2HkX+Il6NSGvtfMi\nsthbx5iKpzBXIgNbAYvbl7k+mLNArlfGh+VE+8bXQRqQHRxI2pIClKTgB7sl\nvwfb+ylSCrg2WEk6y2JvDKNDo5PEGqsEy86cKvEoR0DG6rfNlEG7yLVwLbpO\ngObw\r\n=Emej\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkhY/BKkbhnumtqspPYVEvYDmNvK3DDkAmkDzxXL1HWAIgNo1+Q2vqyGGHpKYXxNKHwtYHz+t+fLp4sFoEwtK+W/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-top-app-bar_0.24.0-canary.9cd7e927.0_1631737927570_0.48511355657103605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.a7132082.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.a7132082.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g5qE/ZkxJrgncZHUkjfC7l8S1xuahGqhZ5DjjUpzLQrqQ7Xnu6qWT5CoxjJjQtTtB8qSv+++Bn6RKPS1Q20jkA==","shasum":"e4fd336adf8ac203a7f0ab1fb4cdaf11e7ed67e6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.a7132082.0.tgz","fileCount":16,"unpackedSize":61599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmBCRA9TVsSAnZWagAAKB4P/39J37OwolqRRC3VDPml\nDW2r1eE0nujX5TSF9fKBwr3WhL15zz885KIyFIIEGFF0KQ2capgIIKE0dHrJ\n9UfHSnyIuA4nJ/syrKsBr+izElVq48MokuDRL0nZ35ZHFeTVfj7UHs+Af1NA\nlmNdGEPyA8ZgEAqL630uRUkUG7mdgan/5xD5hsiS59CMqHPUCIX2cc4DwnBa\neOPxn8Q1bmgwrbl4nQbIpWmP8umOpFTAHqlhmb4/ab6v5/pgbd4KbdtMTrkh\nJqPrKl5u21CnZC6gvb3oZK5CC1h+lyvHa/hLKY+cMZCpGZ5Y9zYeOeMkTGs8\nrjLFj95jy1wcV2JpYlAs7A80IS9Ut6Zi8H+X8dnAShFJhxCJRInr9YO49DgB\n4HusdJvbmMcJuxR5uVsRqMPDqqOv+tz8oSPGtHSnzRrsF5Qv4wmk8exSOAbz\nwO19wXtIXdvISixXaTrypqluV/ql+8/8gbSi+QYx8rdzpwLqzyRFMye4R3j4\n464yMfxnH+RC+uGhWVXcG3ruX/8sn5kiGcMEA1yC+j52OWeSroc5YP/ePjrh\nCG9dNM94kIB02DrTLRAdlC98CSDF2vWH4ioZSTEKhRXkB0jicxTz9GCh48tE\nnChojU5CG8+eYUL8UofaCyKTn+AG/18SH78N2jKF6AxNTKILzYsy4U6B3Tlq\nH1zM\r\n=NfsI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqSxoSJI9BSSFdAXrDZtpnEJ7qZ1NCu2Z6pXtN7wHO4gIgW78SsDTvJUmLtgwlnViLTO7Vo3V22SHGymW7FYbTy9U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.a7132082.0_1631742337099_0.8092158999977104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.cd9110cd.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/top-app-bar":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.d4e16a6c4.0","@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-84KzvD7sztGXfuH5o/yqlFrJWgqDWIuHZPd455IxUH6GMhOQiFYSF5a9k6ltz6J5Kgdia3e8ltWx8Caufcsbrw==","shasum":"0dda79b5a23fb06e1b9464f521ee6353c32c73bf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.cd9110cd.0.tgz","fileCount":16,"unpackedSize":61599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4K8CRA9TVsSAnZWagAA750P/1DVu7EKFJZaJTQyaiN2\nZ3MUHU1mE5d+zmumnPDArRK82dXytzbYtEOOd8sz48MslDVq/NOzphO34lCU\nfYRJsrCN/XUGnnrSb92vB0O2tVXdI9RKeXH//rSMhFIL1T3M0zQdJLCTI5eO\n37MUlKCGiTu+M2xjPA017L2En6kRb9Tm29NeodFdvcDKiT8AMhpeNrIY25Af\nAmjHIu1hxgzlPp0vA843H9GGfpUIWzEqJu6OG0RKAawTtkXzvbHvhNPMbkcN\nyEBa9uXY6VgfqB+doLSFysyGPlU0db4r0800OFf4hSNpYp59hTIBl3mUR1HC\nT2pUsHXVoeY+uTkEGT7ztXzhYtC/dY6oJOrXaK8rAi1WqISvT43xozPMpvha\nrM6+Uvzjl5LXv3U+1qmFLk872P2k+LmMYT5nosgMaeuOaku1lY9PMlCvoWtj\nNaxorxK5GQn+6XXNxMuu7mHTa81qL1v1dKGlaZN2FCShVS+cROwsi76UAo/c\nM/10vHA+4jwgU+D7Wm3zSKG+B67GuH/iO7AWfSnrUxPtTuS9EkUNExRN//HG\n6Ic1l3/C9k1ioLlCk7R0mTxGYGfekk/gvBhu+YcGLUZjo7iyFZJDCGWBSoOg\npQNuwSMjPmXA5KFT4mk4xuunfATT0MC6c+aGyh2a+l8QGtf6DsXex/l29lQk\npO4r\r\n=qj5L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEB2OGcToJeZaNKe9eoHnVeMOin6CMr8FqodjMUcNZn2AiEAq6gI+ZmdIlyr47vF19RJxlMpJ+g3xatArTOneYHJm9g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.cd9110cd.0_1631814332188_0.8222550555967669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.1e5a9883.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/top-app-bar":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.d4e16a6c4.0","@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-4obqRlMlao/+THIi0oCkfsXbtewkxPQ0qw94lvifqroEHO4ZVCd2mravjMfBmALe18rgcmZviX1WnrhbCs2Dgg==","shasum":"a0541ebe2ff40ca1154889e2df0ea7c191409647","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.1e5a9883.0.tgz","fileCount":16,"unpackedSize":61599,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPcZf35rPMjXQlfgFOmm7RCbK+dI9ltwTNDpSh5LAJoAIgbLoP4RDsilOP+ypPP2MAEYf5fchvNKo7/+56ka8pHdU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.1e5a9883.0_1631911143641_0.6401153751867099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.32c830ee.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-n7Nrqs3TOtk7c1q9jdxpeN6ZkFB2w+E7Ta71QSuxhtgcQ2Q+eoXc2In9NhDsFjjnWQ9WRRWKf177JHfJBUMwpw==","shasum":"6d38beec1e1d007660635881bd5f7e2f0d3bd32e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.32c830ee.0.tgz","fileCount":16,"unpackedSize":61599,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ6tEgQrZfvLr2D5EzhIw+9w331tLM2RxXweCFcp2odwIhAJEX6vSEmSdEwpd11Am5KbL8y6wcOP2oSOSui8QkAhnm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.32c830ee.0_1631920122124_0.3369761562585689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.1de87bb7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-6OyBDEd0nohuU2IMYVUX3U0kvi/pCRneBTN3zO5urI39iZzGArsRY5QsImydSd1ciDUqhedAmqY88/nWGNgRdg==","shasum":"aa8745840a275def94665de23747be37ab95d0ee","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.1de87bb7.0.tgz","fileCount":16,"unpackedSize":61599,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVKLVgWY8ubv45vScF2a9+rFOv94bamG5KpAfFWfQzlwIhAKyyKBJc54m8wkRlyo8u5i2/+J47B9LckN55CxZ4Bbxs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.1de87bb7.0_1631991125469_0.47100530435536125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-dDeWKa/+57MzYmVEXCecHq8rrF3Vz0lrSm+++p7EpDUcfqufkdzsxnk5A0oSPLwfmSodBxscoLI0Rrn9e9BQbA==","shasum":"6b23196efe7bfbb5e3c2d2c82e8b064371f77c77","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.f2ea80c4.0.tgz","fileCount":16,"unpackedSize":61599,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICn74sgPBbDIMs7Fu6jduoYeacoIFZOOlzPXTyCPpryEAiAKSFl8J50+CXsJbMtFUldhe/8kBCZ+rxc58bbUr2CJ/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-top-app-bar_0.24.0-canary.f2ea80c4.0_1632160490571_0.018373111722056246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.569d739f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.569d739f.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-aVJTTq7Y2huYw7akAXD2UBGhixXzIBVvqRE3H8cfrz92TUzShlAal/H7Nq5v8UiD7vj0oM30yDHscNYZ748obQ==","shasum":"ac5c1ddc57adba10d03b23d22c5f2e23d44226cd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.569d739f.0.tgz","fileCount":16,"unpackedSize":61599,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVzMw4i9bT3EtffWuCChTcQRaNmSOxvrOoj5W6VSSIEwIgQ1t4fWtdplgo7azMxHZdZjqnJxR6LBPefmEpTZmu2e8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.569d739f.0_1632173019973_0.1630087206820936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-top-app-bar","version":"0.24.0-canary.5a434a50.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-RouA7QJIicfl6iUM0R3U31v/kx5RyKDM5PI9hqE//IGHMcN+y2qHYoZyKHVL3QyTXCU+SVwWvyVDgJB4b+IJxw==","shasum":"bfa647edac3aaea5c12312464bc0fa3e675ffde2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.24.0-canary.5a434a50.0.tgz","fileCount":16,"unpackedSize":61591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAg4wBwhcZfLQex3qR+PYLxuCEOQsMxR1e2gR8D3niGrAiEAqv8yx5MaTIkmQfQlmltaQChjxTQZImYNUMoz/4dZTnY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.24.0-canary.5a434a50.0_1632189636840_0.5873674493642678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-top-app-bar","version":"0.25.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6be1a13e29a0f18491948418d7076fdc1c7031a6","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-/LV0EoZglNca7BfK72kcvCfUoVVsww6tBpnCcfgC5j25NX9+zbgyBgPkGxNeDkk5hO5yAjVVV7DuHjsf67zGHQ==","shasum":"48fbaaafe4aaf8f5c54c79e54435cc1176733f67","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.25.0.tgz","fileCount":19,"unpackedSize":80450,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/4/fRp9Ki1oc9Cyhme7kou0/tHmDngqCgM0qfuIP4CQIhANQMFsd8TeKVjG0G7ci9LWUwWHmryhrI+NiTzR0/rWAz"}]},"_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-top-app-bar_0.25.0_1632192783422_0.17133166307436998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-AUShjuz8RChbf9AE8qQHW+E+KhTz3cbtJqoAgds3w3LsAzNiEzCedeH6X3G9ogl6VYem+TPqleQrEo9kgJ1u+g==","shasum":"0ff2ed4315e61a02334c8ad2bbf686362eea8d58","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.b1c1ab52.0.tgz","fileCount":16,"unpackedSize":61591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7hEpBpPXZWCbVWfAE0eJdXlqUrY+0M8rhadJaVXfWEAIhAMFJG9xQru/pdcI5r8ym+RlIWNovP6rM0dxAlMYfoeOu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.b1c1ab52.0_1632193926792_0.3015218627752898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-top-app-bar","version":"0.25.1","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.1","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-QagOtGq2eZzMUJdEDOKjmfuJMxhj76Z6IoZ6UnS9Hj9KxIIhf6yyFqx0VGFv1QaNf9/bkvJm+fueGox4+77szQ==","shasum":"fae2351ba5302c8e90c6d0a4326a06d830769206","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.25.1.tgz","fileCount":19,"unpackedSize":80450,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnNKRZYcff52vtGznurNUnshCvZJrM1z/2VrCJU/2HdAiEAiLzgo/X53CRpAFwUcKybkAhFlJ1gl7cAlNQ5Ue2l7as="}]},"_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-top-app-bar_0.25.1_1632193961767_0.6295352695508907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.ae060177.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ae060177.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ZMN4fiEt2xU8+zCSIqxUupmubiLkXzsJitJCxC40BiX5BZ05rOdm1nMWV+ap0fqt3WfzcKQ6vscII1uKjz3/pw==","shasum":"fc91ccb9de86e51ec0c9921c6d4769f3108fd4b4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.ae060177.0.tgz","fileCount":16,"unpackedSize":61591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/cNYhZBvjFwBsyaqs7i0Esjo0llF+fAdL2A7hmZm78gIhAOpdat1Jb/JuT9Dp1zSWD/rv1NUSikkO1TWq6qiC8IE/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.ae060177.0_1632235083353_0.2181497639373149"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-sEZPa20cf8NWf4W5cPspGk1mXa5mpEzf4eIFhSXCBOqB2hKn8dRsl5EfBuM/WVHCvV+7w95/05cSCJYgN2Y4Ug==","shasum":"98acabcbdfed57b182e0b8e4332d71ca346c066c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.b6fe2a12.0.tgz","fileCount":16,"unpackedSize":61591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc/BHTBL5aMYtqdwd5B/KDPucNPoagqUlccTEUriJ/bQIhALSib2kObCjcW+VY3D79o6AjV7PZSHPHgb1gMxIisjKg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.b6fe2a12.0_1632341772512_0.4017301597835521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.07e91417.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.07e91417.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-rJlO7t5Ye2HADsKjeqk5g4F1f9D1CHLbeGrsot34Q09CDvJnP6eYex78ckU8DERClGFWloF1qezhDA5e5fs5jQ==","shasum":"533cbf5d9fa313d622a4ae0432eb9f0af0489068","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.07e91417.0.tgz","fileCount":16,"unpackedSize":61591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA5azxZt/A3gpnRBzS1mAl+Shqug3DHo4htEdoUw2clJAiEA9lOLBgOindYjmcfPgH3JJWkXs5J1dHT+XoakLDraJiM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.07e91417.0_1632344741139_0.6551560660223883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.e2203ffa.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-lO03jZq1w4fA1t6w0LyJN+u9ZuyXDwcI/BDfyN6Y1o2CXzjT7Mv8CJ5LSmMvFRDJAvSyDH0XWqYHHIeyP0/8JA==","shasum":"26ac7452a9c412eb782422d124e85b36caf658c3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.e2203ffa.0.tgz","fileCount":16,"unpackedSize":61591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAU2jzd/Uqd+Mgk8TtJ9gGHVMyHx4RJSTeTHi0V/WEwXAiEAmQcI7BFYMsAwSNPzDwJEppySXk0Jqj7gBHXyB19fON0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.e2203ffa.0_1632421652604_0.5306301635542645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.4abe237e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/top-app-bar":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.c79aa0cdd.0","@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-c/gbQVYZfci7ijC846byMCiwWbLjcsvQGkE4PvPIdi3KBn8hHZoOuJiHyl2IXEVlEZQDujN2NIJDpZIFfNedbw==","shasum":"a6728f6a980fc7cf419082321fd48a5ae20764be","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.4abe237e.0.tgz","fileCount":16,"unpackedSize":61591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB48EqcxeEhKCmIYgqPsS4uZQb8m2CeOHbXBuR89oid1AiAJysSW31hyIqyu2Hn2l0WKYSOs74cUsTFzoW+seUIpnA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.4abe237e.0_1632504664208_0.41743755830022833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.6278ee5d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/top-app-bar":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.c79aa0cdd.0","@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-buQjxNnYslDfQ6Ht7SmojHgJFiHM7OzWdsMEvCL5C8dIFf3DPwdfF+trBtmlc8vW9nnWCem7duIR09Vhni0lNw==","shasum":"258c98366c3fd0ec7f132a3c874cb2c49ef32e0d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.6278ee5d.0.tgz","fileCount":16,"unpackedSize":61655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF95ox/rxDV8N125WvAqBiHDQdguvTPDqprRDwA2rVaaAiBnkanZYyQ35KdyyYeLvuscnMtdWoafl/evOVnP+r6JOQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.6278ee5d.0_1632767477656_0.6679739262876117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/top-app-bar":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.c79aa0cdd.0","@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-C10UPVOuwIxkoVbWDBFCz6sNB7uGZUXtZueQfSceW+NapBQAQ4Kap0dzkraMEqRtALbE7tCG6GGtHekJ2+9gLA==","shasum":"a3dd3006850193d897033e7bac9de0c6a724114f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.3a5d5f34.0.tgz","fileCount":16,"unpackedSize":61655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJY34O+rCopA2DSs6YsfEdojehxqHPxb7L8/ZjAqvA4AiEAo+pmt3+Qn9MpbAXsE7FK7iB8XyfcfpajaMe4hkRgF/k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.3a5d5f34.0_1632782487542_0.5941457703387478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.143ed3c8.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/top-app-bar":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.86b50ef74.0","@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-3KGK4jNkNLkszteCWl3uzJwq7TpRcX7+ENfMKyqUVz5TvGQXvCQdZbMKnYIH0ykrAwCJ8IJ5QGBnFuvxk5JDrg==","shasum":"d749ba7058360acfb7162d7c8834ac0580ee882a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.143ed3c8.0.tgz","fileCount":16,"unpackedSize":61655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpcaQ+wYkQzwql5NnhdYR1Om0WjNrXuwDx/rvY2zXoXwIgScCLrbUeoEVGtjtRcDc0HddUJYxdQ2KEELjusN3lnTk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.143ed3c8.0_1632880246649_0.008299597838075323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.e5923d68.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/top-app-bar":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.86b50ef74.0","@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-e87xkw3uL9gcdSy1Zwin5ITzR9lnHXwha/UtKPDrjPLM7/iXbSzPYZokoAuVGL8izqwQHXIqJ3etjahhdIzbrg==","shasum":"582ce3d552fd414fe5a83f064708e1af0d4a1596","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.e5923d68.0.tgz","fileCount":16,"unpackedSize":61655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCie3GtpIpz5xhLCKSYVDMpnW1HIpjApLSCeQkcI80pQwIhAKYBo9K5wdrHxPzDPrUCiTGDfrGDItydsWBmgH5jZ2OU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.e5923d68.0_1632960344380_0.7765781975189243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.d8ed5109.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/top-app-bar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.586e740dd.0","@material/elevation":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-9ipvKR5CRsxpxT8nUUkFK2Ux6Y13QfV5v0hNHTMlLA57gagE7MNy5BRc6sM70B5FhtAQGws1gxHyKnNDFO+DbA==","shasum":"7e3f6611b274d3d6aaa81c483807d7a18c41a301","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.d8ed5109.0.tgz","fileCount":16,"unpackedSize":61655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYr7LNSxWJjxxPDOTV711Daq3jgEohLl8u35+wYnWWQgIgJsz5qgjmHi2s6wuBCAMQO4DplDhGqd3Xp8AcYDKWnO4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.d8ed5109.0_1633044828890_0.4837805388587153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/top-app-bar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.586e740dd.0","@material/elevation":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-UA9sAX7K78Pj/ysKzzAl1GFbnR16zI+oNsuAyHkaordToM+leq+SeqSyt35b6J8/Y78EK+uOOSFaMpvXsbB12Q==","shasum":"084202dac02d5868d6876bfdc680db1477acbc49","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.0efb9c2c.0.tgz","fileCount":16,"unpackedSize":61655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiMV/W/8cuHX67cSoYg7NhpGAwvlpAvSCAI7mN45u2QQIhAP7xw9H8ZzFRN7epHcrjNWg76FWgqFLKQDdf6poSCUQO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.0efb9c2c.0_1633140492994_0.5148769458958506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/top-app-bar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.586e740dd.0","@material/elevation":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-oJTskRcdSVIDpedPkhQlxRCxY2Wv0vlW8PNOLBm7kQSoarP7JiQ6iegagnW2glJm/Mb8L48SKyP6aBXBJSKXkw==","shasum":"963f38909a20eee1cb0b7bbb1911f869e9b6bba9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.1c9adcb3.0.tgz","fileCount":16,"unpackedSize":61655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMPO2QZj77f8UdVb9B+i798MryIKGGRkqjtZ64a/nlXwIgc5aQ6eWk7JzHg4AHllDWLv3swoayBbM9AvBK4SAtGgo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.1c9adcb3.0_1633368809376_0.02165256664866244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.dfc00d60.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-LLVF3/1vIJ7ttR1osoB2eDcS0x7dTDc+rFBofyq3jc0pywJIho66L+KN2tpoB19NJFi03vkmLBPQfvE9uq0ljA==","shasum":"f6cbb93612d27e184f87236a30667f9aab253683","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.dfc00d60.0.tgz","fileCount":16,"unpackedSize":61655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh0xAhEfA9GVTLB7Uza5QJKaUSQ7f2C+NR4Aml7ABF2gIgfrkUBF6bcqGldgm0XmWi6ENglnJOYRwASgcbfzQoHrA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.dfc00d60.0_1633741031382_0.7895482186613014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.c3aa844c.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-vgKp1BWCZIhDYWL82nZ8FXjuUeDLjJtzw9PXTXlzU75wEtOje4UzaqFFR33WUQqNRZ/HQTgiALwdPIBnSJ5TwA==","shasum":"79a4684747180b592ca7f0948dfd695f4a677fda","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.c3aa844c.0.tgz","fileCount":16,"unpackedSize":61655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNZCBEYp4/wsBhbwZ73skcY0XIzXjUV6FMpqEAJtryJAiEAw+F9dWi8upaQ3Q34hwPqO41XibvR+Hd0yH14GLc8u50="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.c3aa844c.0_1633994057249_0.465606415936741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-top-app-bar","version":"0.25.2","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.2","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-4h+i5/TDBlnGQJvf+wl0XvYgS324fyRL172SA0AJN6/JCixZ5IWgImFNTrvBnIbCCAQfJyV/Wq3FYPeKe1Exww==","shasum":"613966733ec789c0c65cc9009997be98c3c7fb34","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.25.2.tgz","fileCount":16,"unpackedSize":61620,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFV5bsX9pIcU5hCWmG2FuxH35dARYqSO5qoiTS6R9dFAIhAI9Iz8uYY2msJKXBz/6vWYFU7THkW2v7P+pg0u6VPJO9"}]},"_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-top-app-bar_0.25.2_1633994309172_0.6917933973197459"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.406d6fe1.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-ZdZ2VcQFT0i0Ir+OBgtUw1ejlpJeYJNcPguw/3a0A/bOO4eKtGJWexyoRBHRFxvLA8tssubbus0dIV3uaiIvrg==","shasum":"5f73378c4f90bb8d85ef35c30ffa867083b1beb0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.406d6fe1.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9hcmYZMYtVhXvbM9E9yPJXQWcYWTgoKOBH2UZV79vaAIgfpwYAHxBouWspP9BWNYCFvVuxK3R5BLASlBS60Xs5Pg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.406d6fe1.0_1634158763399_0.5736133319383738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.ca0a674f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-0UpMMhXVz5dfXK5VbZ4UCD4fGsLlslEnVzELJNcSrqcb74DQlJg8GPNUIgic/8Yyqoj9tFcV20mmEa9lXCwHiw==","shasum":"263f6e85941299ba5c614180111b525cb0091a19","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.ca0a674f.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFEjymoY0KjZ5HTMixpHByn8mGoCGobtHslK6AO4Z2YAiBE2Cy1PeWWP0b9I2owBjFQKg6tZmNtgGwI72zmqVLr0w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.ca0a674f.0_1634593009617_0.39473856343110736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.eefcf660.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/top-app-bar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.261f2db59.0","@material/elevation":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-AB8NH5RzXshquICYPzWviCxDEKEXVR6MFcokePZTgN054h72FxzyJJOOC+RnLzg8ajYWlVtB6H/Hdrwu0ImkOg==","shasum":"f217d392f012cc193d67c4a47f521ebaf9ca455c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.eefcf660.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYzFlW/PsP/IRvISwAeBe43x0oyRxQDD3YHf7+Tn0hxwIgOEED6I0i+SqwTBL6N2sL1NPVLjYk52LCnmIOmBYtO1I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.eefcf660.0_1634765013183_0.25139362170254387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.d21acc8f.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/top-app-bar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.261f2db59.0","@material/elevation":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-FeQ7OoS1dqgMEWC4Acrabl1sI0k9vcnTeypDQzy9HtKpRogdzYejWCFhNAm2x9nrogq2uZxWqvtE/zj5tzgtDQ==","shasum":"58e19db64ab47383984e411d8a6084bf9c94137e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.d21acc8f.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpfws/SbNEOPIwx0WYFMF1yMU7etj2iWeWbzfqThcbMgIhANgDRvc+VadgYuXfB0I00e//bh8N7Qze2ybSiBaclWtg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.d21acc8f.0_1634769145810_0.7680506324128271"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-top-app-bar","version":"0.25.3","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.3","@material/top-app-bar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.261f2db59.0","@material/elevation":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-2z13T/L9WTq3JFq2ygi5HF5tEUBToXjYn/BEJjPXSbe0jepRS+0wtk5axkbaq5ObSkvhBxdzjsZAaWFJ0QVF0A==","shasum":"5c8b42329c0fd32fefa3115912e2b6bf66fb2d69","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.25.3.tgz","fileCount":16,"unpackedSize":61596,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA78BsYNNiYNvRqhsVnO1XuvdrQdoVi5ErzuUyY9ydJJAiA4V5WIHvVb3AqjMM0HxW2jjyF8RMnOyTFvxHSa24fyeA=="}]},"_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-top-app-bar_0.25.3_1634838939119_0.10732091148462519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.60449b7b.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/top-app-bar":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.9803d2dc1.0","@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-9zFraHqMgglBxV8ajAwzeJPQwHiSTTFwYao7zhPr5uctbZ5ySUBllAVRVG/y458qZ/8lSq5KduBXhOOARMdFJw==","shasum":"052ddc3030d4ca7d0b34237bb82c2324b043afe8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.60449b7b.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo2AgMJ4nt5AugE9JnQyAojBBCKy716CkSeuJQTfe8twIgL/vEZ1xbdTXWxLy4BAYbbPGlgrI9waa4HUT0FoU9rlc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.60449b7b.0_1634840241685_0.33364606442733713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.0d8084ed.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/top-app-bar":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.9803d2dc1.0","@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-hm2geGZaBkWd0gF1+ns/GQ0915AYdnYBZsJFTDzw0EdG0343RbTgFtcIRu8seB178xbm3Kxur7MTsm9O9zuAFA==","shasum":"a250a8f55b76420ec5696b2d75400235b1e451f0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.0d8084ed.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2SNluXZZM+GF41lEw/oq7GLhrA9RCib8CnPWfkpvSywIhAP64NZE4zbPZ2P3oMETznzKG+GezGxTmaHPfA3awQzvj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.0d8084ed.0_1635443090654_0.4677860168830268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.232327ee.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.232327ee.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-S/lxUQStalSWyVCW9vGX83IsKHJgP92ZJRe8ifzvY2pbc2HgpEeHeBlQycC1bkPe/O9M1LunXpVVkbbG7nMXqw==","shasum":"2797c6b378347a9dc37a78389721e42cfcf289a0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.232327ee.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFkjz23pGoFrl8bY1JCOoc1fLGZVoYd/CIpnRXzegr5QIgXRFb7Vq8NdL01B4ijMT0ep4w52ScZR2hWcW85dOAWzo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.232327ee.0_1635797741982_0.5613870026994414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.0a492ae8.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-l4huG/kLIENcKSPqB1JeE8RFR/+p5bIAn10RZp3H8h+Fxt0Hct8b6I9rWvk6lQRygGjzcGT3JrO3/PioBSNmdw==","shasum":"434f19c422c877df7e648b0ba4b1fc976322075d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.0a492ae8.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtqss8J5kCf1MKsHP12WzPL3BspmcKKvUF/cybAVuolAIgfVvgSMz4q4IhR3kn/rFGdo3AwxeqqlcCgTLqmxE+o/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-top-app-bar_0.26.0-canary.0a492ae8.0_1635847221125_0.45188479044542906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.0aa18745.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-lrF4UfU6DSXhqQ7sv/iSyDMmw//2+I/VIknDSsRMcqz6aCTt8B2jU0TqysZ+ixigeAl1QU124rNmy6quRziteQ==","shasum":"d29cd2b8d0f4f5518fdeb45f09c045591b848610","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.0aa18745.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+JlemjGSxQKOqtWCI71NhFPCphieenbbj+wGNFGC03AIhAOnkqz06IxKEzjeat/1Sd/q7n4ozInuf3YnKjfkw9u0e"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.0aa18745.0_1635876467317_0.4615872729510009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.f3e28323.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-OHeNcmsIXAG2Etv+xg6w13Fv4orwaMrvYEoU4lEPhzUffQk2ic+PnnptBoZC/yqvog++SNLy72nEyz+us/pnlw==","shasum":"60dda2caafd2d51c87f330626a95d2ebe851975a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.f3e28323.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/eUOocQCGs07x/iHI9rYblL25PUww/DeiNeDBMHOMLAiBaIqw34in7UlVp1/9rZjJw9RKBfrBPxAQkCMFYIQT2xA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.f3e28323.0_1635879569217_0.6267747069177598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.27e05c5d.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-F/aKwWCgR6ka1LjMkDtNteOev7ko9sSYl1AJN1YPYuxLCEbY6j3f4MlZXRd+igKkv4+UcDnnmE2ZA0IOyQmo7w==","shasum":"99aceb99b325978b059c3af5341999738a9c208b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.27e05c5d.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3I0eG76mFQnXUBFhONXMh4ycHrSTgokbezbnx/2hOCAiAe1DVvVW4AtZpFqk7Yc99jXVq3ra3r2cg8XlnXxpdmvg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.27e05c5d.0_1635965095487_0.5965991597852778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.b9e44af7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-twqIOCFzOX0pJfylkH7EDOUMd7HYBA0SQiySieRmmO+zI9xBBjUO7pouffilLY4Np3FUV8acoWXh1ZYZZrWjTA==","shasum":"0f39761dcb5f5ab9136fdf045d91e0768e5d2a98","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.b9e44af7.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZV5LAR7fVORy6H6B/1gOoBbfxqwZZpNQy3fXWdAXhMgIhAMeIyi4GjnPM2jTmR9bLZA9eQ5cMkSJLoaRMgRGbyu2W"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.b9e44af7.0_1635966238630_0.027884073307452573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.448f6cb9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-xnRlZe2egRDjHYunjL+vzP0BcVWJewFysR4gkhSFTDrszPj/MuYFWP9bOCiCQDWQNmAFy/y280IDP5kvth7K6w==","shasum":"6b9995d93ac1abc921cb45b1b1fb9db821b67091","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.448f6cb9.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcivoeD+hZ5YKJh9NswvKqBVMMxeVl79NltL9Fb9VFDwIgJj3wwrxz2NmSEvZpqdy8H70qdMm4CvPZvBFmV2uyi8I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.448f6cb9.0_1636049270768_0.4768397208781916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.8067ce28.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-XiLyJ0oNMvuAzC4NeqdQ4jaEG+6+y6dGFNfTf88ih/lSJnNXwPL4wFCt+T3B6lvFyAm5FQyCGfxX1YKv0QfZBg==","shasum":"d9ec74c1586f30088701fafa0021103e5519bc39","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.8067ce28.0.tgz","fileCount":16,"unpackedSize":61631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA8BOgbM3r9B2oo1GYOB/bEOPm3FwYN+JYdeqCtQ3yVxAiALQX8LTw9k5ETj/SxEpLJ2YZXQtuJmah58v3dbyjUjeg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar_0.26.0-canary.8067ce28.0_1636064543167_0.7604441992166209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.345c2bb9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/top-app-bar":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.43d08ba77.0","@material/elevation":"=14.0.0-canary.43d08ba77.0","@material/theme":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-HRC9ej7TjVs6II3pf+a3l7Dk1W6ijh8QPP978oqcnH+1+pirngcR3vcGODL6tvI+mJdSLLEVr3pSrbMTcmwyCA==","shasum":"f44d59d07df77450787a1e6a82e72cb89be13d31","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.345c2bb9.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP3qCRA9TVsSAnZWagAA/F8P/AyI48FMdATRN+JaogHV\nWP8fGPbfTsP1/I4amV0cCe/U3d7ePVHTsukN6I7LgsP3SsGp1cQtBpy02f5b\nNhrQHpr0R0ELvRyY3s6/J7WCbCWc/r5eesChFf9a18eddtVf+9xj+ngLDBcU\nGtLmyJzmN7T4blrnTFXaaLiSk2tp1ZBAF8jJPB5NY+fkvkpl4Ye5tTOqO/HJ\nUzGGbTKfHSlL88IkioRQ5+nwRp0sAhXGShKsTuWQbHBm0zT6rdpzg7HCHF3S\nP9yXc+65TDMZFl/eK1S/rwZB0hgqHNZda6e4vVlzpTPJAYRQPUwf8FguSsCX\narTdeWc054bAz7jLi+Y1HFXXftfaT2VwzGs7g6Vmys4zN6aj6SCa+jggC73H\n+f3WLaAw2U41I2K+0AwcBIGNxw8TBsRY3KCW3vAwDFL9xDA3xWyfDRulsyqB\nF56G4eUz1EIlWtY/muyvstR4K6VEZ4aU51lVtOhYNq/IJHos/ziMF0sLyR1R\n3A9k0kn/dEEPiTV4Qz6KjCHSAWgEsgWWkRVqiwavdHqYR9PwpJkLFoJh6Ubo\nZUBq+R88HhTqDJK7KGAX+lsYhuyf3WP5hqBBSiwhi+yBN2JNwyQ5HeGHUeLP\nveTHV4e++EL3AyKU6XHSgDGFKN7o8m6y+yAa+M6Hsh5x2igtohFUAfsFGO2j\nJMEB\r\n=I+mF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGeb+RP6VEZSoXOhfMyHzCuYvjXa6m39yaGHlRzwL3k0AiEAqVKmeIa+oR9tnjp+Bzvbh2EbAb8bizfmYAiAIKm2Km8="}]},"_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-top-app-bar_0.26.0-canary.345c2bb9.0_1638465002678_0.39226223667055415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.0547aeeb.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/top-app-bar":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.17a072535.0","@material/elevation":"=14.0.0-canary.17a072535.0","@material/theme":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-DTKUcrPJP5Z/cKObTmP3egcyL11mdm2IUR/3BAK+1urmCMJC4/ogkMTNW9vbbvBWdcWRqawZgNqPRbm6+FTRaw==","shasum":"c61f0f2e83904081263eaa8e6733c78d37cb4036","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.0547aeeb.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjvtCRA9TVsSAnZWagAArW0P/0vXCXo8yZol0f+Wbeoc\nO+ddqEUxeKnPSs28GiHu2MGwFARnWZKNUQ8l0/BHee9z8ws3i8yKCFvON/3H\nRsiDB22xAw8E5IYer+CGAobizjZNydUDLOBoRYx2ykG4eH9BDYgsUq2yh69A\nBdnTj1DvHgN3rbohHZowC+Yp4uEHSvVjfIGy25eSTjlPdDNVQkcUklIufPgw\nJFTbFMfmhjHWZjR8ANVNGGWIFXXQUnUZJLSFcQBS/SZfsNg/va0G01gXbfwT\nklsz6PyjYcmVcARYrI5Gbo5jAiroTCRCG/LEBp/XwL/DIrmOw44xzmA6cpNw\nj0naWmlzvTk47ChwrK4ksz3jkPtKL56EYmjzs1++vtksKhemUINTc52mhL6o\nkepADiSQAkvg/LT3rZZYr7+LS4Uq87spG66HJZJGwqOwoZ6iq0m9FAgBhpQJ\ntbQ+enX3n8Sa7aq2of6ctj3z6eG7Mz4TqJPUpNVipHx/4hTuKgwM5qpcD3Sn\nKoPv/3r1LN0fWcbSDs1u5ksTMNdpDZKeFIo/4Acd7YCF8tJpl6+Cal7jbp7v\nsAXkB48j8GkpzlNuqop0QVABb8VnjSzjJsovGF0B7dnzjq1RzykdMJ/VKRbY\nS7tdxtMmrAGM0rwUu8DPtfI6LUz/53MCcOBe0YCaFFK+e9MaY/v4ktKxfkBA\neTa7\r\n=dn9z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDr0tmEEwyVtaMO1UjwtRdInOIQnhzvxlVIpSrRZaBBhwIhALg8XqgiE8CCuwmQZ7te5RC7Z+Y/5AOH3PHe3GcGdZCf"}]},"_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-top-app-bar_0.26.0-canary.0547aeeb.0_1638808557340_0.8740929615464246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.3b2452cc.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/top-app-bar":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.b6510c8c1.0","@material/elevation":"=14.0.0-canary.b6510c8c1.0","@material/theme":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-iAtFz+5gabuDg8L+/4Klc9hRnVLG32WEpvnJfCpHUUp29/Wvm5GlSRDFbYDvU2FFx8wFUWaP9RQyJ/AvSd5lIg==","shasum":"2ecf746c8cb4766d79226dde9c272f2d58b45e9c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.3b2452cc.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhNCRA9TVsSAnZWagAAGG4P/3Eq9zyadIW3C8kxwsEF\nY05BPVysfHVp/nz3MqPuaXJ67hIDDVU64jMSq96cxk7Re83ZqiLx6ooZEo1T\nrSJu2MMUNGlKMDlv8pudVSIrpxcU3ffRrz8Xcav159hIrTjkrAmAP2oOGdq7\nHTzBZZbcb/aF4Ot1E95w1tQwBBwaERVlpsR5CJS5OVcYaXK4A+npeNlmrcel\nJm+ZrHC/6hAXoSIjdy+aBbCXfYAP7zfRzTdp5lXv6WgmtO5LpWVaMdHD6qLj\nv94FkNTE1OcoTEoqFjCQie4kdyXGcchXOzSUsFxegUPdpQuG8beXlaIGjd7G\nDARpjdFrlAWf1sE2zujfc/j4XG6c5y0bWNXPrlKUeugOdqmT3Yjlh47qHnhI\ngHyeAGbJyrjrErNN8F/+p/EL8Q2pMQQ4R/BqZlE6wZGUQSMLhhek81WlOSPr\nicjN0STgnHMXr0frho87LP815iSrrMtdf4sBTFHy6pMfNCXcWqxaUZU2bUnQ\n6Pmu6CteQySin39/GvaUXQ7mg/WxsnupzHtTiPy9NTiDP5oRiXAwckyzRvAM\nUtLAx+0ThVcs6ob7zP84GanNfz+xz3Uf9YulrMfLCXG6Hv3dGIEugnXX+nO+\niQmw3xVFOfLtVl8+4EVjUPkqPa6Si17J7Dus/4m5Q+IqwZje1DOhAj1hIPnc\njMaq\r\n=GT2/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICS77RGl7EGp897P7APDwQXrCHtTPhZT52gXXl6Mynx6AiBxeCgk7PjAIivISYpBDicTpdNy2c/pODrNJTdXKV5ryA=="}]},"_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-top-app-bar_0.26.0-canary.3b2452cc.0_1639008333827_0.3190089858132086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/top-app-bar":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.f460e23da.0","@material/elevation":"=14.0.0-canary.f460e23da.0","@material/theme":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-/Dtl5HDG4EdYAU6YmXonnUN0UBVCrFxKyDjng18jajgjXQHa47Y4F9zuggD9sX84kNuOVS0r3g96H68R0zZ2JA==","shasum":"9d5f02c5548b08c9d2b0f73c4bc9670c1e5d8389","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VLCRA9TVsSAnZWagAAG4MP/0ce4dEGFhxAuzYmWy+D\nVpYNAQpBVXwjYDgLGYbVSNYRp7RHQTjBvTCafUksfswHxvIZeCBGKmYTQn9y\noPB8+StsDIMbTo3tVKmzECBWtRbQnAMIhRsuiZt+5BmTqEedBY/ohMz6SHlo\nPfg3Zlb5WFFML8Js5D2AxPB6V72p0kH3o0uTF0cnVVnFX7CNA1dT21Sc3cGp\nRfWJGQ1a9JQQ7A/Frd0kUEyME0ucGwIifWUlmJxGLIS5D7r+27MeNEKKRGII\njwv02q5HbzQLu8qwvv/liyakb/Be+FEXIJ4cP98wRVgJvkC7KH/LolbQBdgH\nKpZEhhax2kicW1qrgD+nbH2lV5CFprp8wHJq1HroaTMnvTS2W4X7IK8xZO6J\nk1uKSajSQlRtZEAqMeRKKOrA9DaZm77Us9JCR0UT6c9GyPOxOumwR8XmTgSG\n2H+0ePxMRwczWmfdLhOsF0J5O+lFCvRzRmsCr1hGAVX4F43touc785OBErbl\nzgWODg7AMS8GoPP1KWDXeQwZUK39ZFqKQKL7nCPEGCeSLac+yL0PG1swyopF\nD1kuQ2thFvBI5M80qqwpYXpT75sdyCsXEHySr3+sKiPsWnvb+HGKgPFavFFI\niMYxjV4hf5ik2KWBHSktqQqgkLSJ/lLLulMSlaiu1wSxnrK/P7dBnvTr+K86\n2hpC\r\n=PvOG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3Lx4Uj4cCUJVhnQmVavvj4jdSRfL9dt3rZjfu+TNMVwIgLXGzAVDNLWknxhOJ9Glx65INDQGQLzlBuIIivzVf1rQ="}]},"_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-top-app-bar_0.26.0-canary.cf7ba5a9.0_1639163211435_0.7212290772050292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/top-app-bar":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.3366a71d7.0","@material/elevation":"=14.0.0-canary.3366a71d7.0","@material/theme":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-Fg6eOPglQCRUnpqVOQgFz6J2jG9MsA/KLYN7jFs6r6I18afXPhuv8NC/NP4avwyVILj5qG0k9Ptll6uRtKBvMQ==","shasum":"bd7fd804503edaef7446fe27c9542e79203c9ed6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.e1bcf14e.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3drCRA9TVsSAnZWagAABkgP/3lBw+Jl9txiRknTqSC8\nIUw1nC0PE9uSv8R+PNfQCbrdD38b4nP2LlddzLF9HIcphVXogQv+oMjlrGCL\nbbz9Ry8Va1gJGkPz3oDJj4ebGlzakLDGLGwPkXb1tQIPdpuuWP/MGhuEmyp6\nze7XS3WN5YhFLpguZ8NaatCogfhbFNJwdoe3XMe2YuYesYHmz5uKzvsCq1wY\nba9iXhrsnPT3h1uBqjifTyLfC6LBtY5i0MyGXg0OGMeG5onW+3OdFhlLktub\nBTIqeF0qu3wOtDSOh51XyFDsUj/UGi+SftZ8UYyoGwq1Qx+b+spKjP81qIpI\nqvNLMhBikxZodijDxsaflitC/nmPJ+M9i5QHlMvB1ooDh74/kf+gUKzZOsnh\nTAP4fE60LPd3yHNrFTOrmDrorlY/2TZgg98kNzzcCBBfbNl5nQom7EhUca9Q\nPAoPM9UO7kK0XsXpvnwbefd/R0D7F06rIYzoFAWLybH7ssiT8MSrcO0fSq9P\nZAllB/cdRXEGWeLr7TeCD8QJhUKjKco+bPU1uF3TFIcaXMLzbvvrhCBuaQ6b\nziUH9cefWJnol1uoA2RSCs9f+SGPSxRGNuz+ZIEIEmqw/rlSCx4iWDzOFaP+\nflAGPJB8Dp/wCxBOxBetJQSXhZ7heMXrrJGJHIN8OY2dVFKp3IcMRjiRISny\nWKyI\r\n=xEYf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH//CEFqrt2gF4M+P5wvfJP+WW/UbHox6dzezQ1oO+zAIgYhFXJ8Rq5OrdRbEpZrdWaFEnHVOse2YuX79NLLpDFmA="}]},"_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-top-app-bar_0.26.0-canary.e1bcf14e.0_1640724331540_0.9558064874132688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.b9d35b69.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/top-app-bar":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.c047f7c19.0","@material/elevation":"=14.0.0-canary.c047f7c19.0","@material/theme":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-nr5mUJ0flit8wikkO/8p8NFceYbCuj61GJKgLrWLBxvFnGQJ4XCzJgxJNd67HMO4BEeE22yfJqmTrIesMv1FFg==","shasum":"13056e3a41f58380c43ebd16bbbb2b63de28dca1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.b9d35b69.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eLqCRA9TVsSAnZWagAAi/sP/AvaoqblZ1cNDJH/W39q\nii/xfQUc8lXCYR94S3ciriUpLuML7IlG5k9BJ55T/0t/L2Gljcs7YuklKXX7\n0SY++9yier6UhM0G9T4Hq6aTOyFN/so3IGjhLLgINJjwOxX4tq06G6zyLWLS\nl99OJfFpOXjWtnzqjFPhTHQ82+TSvPDzHOHmtTRXToEq+uxWRDJa8tpIPcsQ\ncA2jjWfqd6RAI++YSJYAijfIdwaMLYq0mXnrinC95Y+IcDljzU1HTkLKBcYI\n9kcU/ELZS4+NhIFdKssoYFIu+1Iox+3gsHvYwV5awlzJsp8wQzm8vKuKo0js\nWz3n0zGxIRGkXfB86otHtDZirl2iDTNwyCO8ogFpDVVRyAO1HiPMOvvGkKI+\nNP+QGHRd6NrEyddnNvsLhLDpO9zAXdMnCIzjQ9dDcIWjNIhp1maAkeSEcZp+\nrNMVH3XDR4lq9aJuMN9By5muZYkonb3DNFCDvRYP6gaHxYT1cLUTyJvHHx1g\nUve7Cr5Z3i9pry3Q/GXl+LjfnHU2xRPiGFMywCmIW4b3tkwigf39auSkamxC\nBN5Fw94fzdM+NKgYpUiSGJCDXvOE9DKfV++tOyAual41qD+J6meoelhfAa3s\nf2bRzxY1k5OHEhbPvzyHzdOlT29SW5hwZjf9hfv5QbQ5c2RurbhXOxhCusA4\nS1T7\r\n=g9st\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJSgtpi9YlwOUnxU0hkKicSDKZLxkIkfROV/73/I+fLQIhAKc7oSWEN5lI7PJfL0Dbez2Spfxfj3mUR1fY1EgESpnm"}]},"_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-top-app-bar_0.26.0-canary.b9d35b69.0_1641407209841_0.7211937384057394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.2afff08e.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/top-app-bar":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.05db65ec0.0","@material/elevation":"=14.0.0-canary.05db65ec0.0","@material/theme":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-QbxvmTTRRpxvz1sgL44SzaBTBHjg5jfQ4k5PGlOxhQsccMfrjPEEdQYEZYdxo/5e2/YmKZPofq1ydkqross7sA==","shasum":"ecc4797ad4357712065301e6b7bdc0237c9c0aff","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.2afff08e.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12u1CRA9TVsSAnZWagAAZdoP/ixuxhuY5WVYeBglTsma\n2iBpe3v7MP2/smWKy/AkgrkzEvgP4Mst4QLmyR5H/6pfbET3n2/x7tEsQvJ1\nr0Z6YevOy7trYdMPAt4uqKOiyVYxsLBAau973jCcEoiNsdsJ9/RYdP8e7/H3\nBbzvi2vTDZBmbt+uA9pEM+hHwnYNxXpMzJe36MV0agz2IoqzCYZ4fCfu9sMU\nVvgep0KTHE4jl/4CXHmSVv5l7FeBvg2ZuxW/PCq+G7fY1FF+m2P8ABLDNNU1\nLXB//yFMQrhbUn0tphBo5GiL1odTuJz69G8oNsbCO1Oj01747yIIDl/1wHNc\nHdSVfr+VD8ruCMqJ/29sx6iG23f/FfOsxGtBh/wBzUO+xmFCnnZqJv7fUxA2\n02LcVNWVNY39B4yjF7dsDUqoFHgvGEHghPYLtzipw5hSHOrKFzkOCn2eE8l1\nLYFuroCebuMZL+bABHSXyCUGqlomYb+pWYdJ7DeK/31HAXf/3rlrKohWzNhZ\nNNe+O9t9AZpDgMxsDzZXY5rYToCVIc15OwfrltT1GdznSma3WrArbmPX/A2T\nJ0zxWaQxZyg7WFfPYwFCqJw6MG7LvB5biSF6je1oMYdNHTrBw6wqIMIGE4ps\nIdp9ICws0CbinweI42D7FJs8PndiT/IHWRXEIcjp5+9bWPmEXabjD6ekzJ5c\naPOT\r\n=mZcn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNWOsmbFccEmhE9Ae3NNTYT8f0NmJqN1z0EEVLAlhoEwIgQpzR6BK0Sy8WNURtROnAOCUk9HI1pJ4KtFjct9M4fyE="}]},"_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-top-app-bar_0.26.0-canary.2afff08e.0_1641507765628_0.8199408574241667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.893fc857.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.893fc857.0","@material/top-app-bar":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.6ca8b8f85.0","@material/elevation":"=14.0.0-canary.6ca8b8f85.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-dsSyJvF1RYrA5rv2qCT4tfv3XQbSKhk4NfgDVj9ySK2+gxOoYcw5xH0tmDvjq3gNNxrg0RBHTz1Clfv4M8J1+Q==","shasum":"5a0ba1401606ab8c0ec5e7694a009b11f50467bc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.893fc857.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IwxCRA9TVsSAnZWagAAwRUP/A4i4HhiMpxV7Ej8sld4\nyfMdjWBLMd4SyOeFe6MZi1a3Cl+cuTUv0O05boAJlXQ5BOJQmTwZxJIryDGh\nfuiEGsWHOxUBTfEMlhRwrH38+fuajB0EAZaQIahQ+V6t+BxU38Nq4sHUdFmn\nR7cy+7olWKAEuPjq9BdGBrbnmH6Y24NoAhr1AJTaoWfYe4wWKrXaHkz0KZZw\nFRX25NtdLIe65877GhYjpCFc1OR36bAeDIospKH8DXqQqzUkbV0fOwG7IiAF\nFc6km23lIACDsonGbrkrIpSA3CORDMkwNbl8rmSwUz+lriJviVq22W2tDT4s\nItJWaqvm0fKvKUTi/8m0d+ZwwQX7xIf95v89sqJi/6eV7QakJy0te/kCMkiT\niZ0jeeCt+T7mMjA1eWUh5tP2nd0BFWOb5vl9CensY91sL1/dUzl//0CQbw95\ns34fKy1MZTfWQqrlZpqiRcMafFf/rwQz9OwEmU4/f6X6XVK4RN8rh4QPf69F\nxtAzOz3iTy42KpAZ/edw9tQQhI0GbjFkIdPJlQgBCUg7Fp/ibHPZ+CfOEWP1\n0gleruAxa5IDCdOrb70AecM/qUiTrHdKk20ZZawRxggAN912q7YOMNv7a0oz\nXcx5WmcXCgzMtQr+1ZKuP95kSe5FQD0wM8g6KnyNnDDzEB7TyXF82R2T0HgL\nRR4K\r\n=tUue\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3Sv5MUsvYWPzRfFlB5AzM7q2VJV9Xo+GE/Pq2mftMcAiEAigbd6KCUjnk9WYzPhadlSYLjLftT4ZzVJiT5ysntJ/g="}]},"_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-top-app-bar_0.26.0-canary.893fc857.0_1641581616938_0.5676816744910365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.69ba13b7.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/top-app-bar":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.c14e977ee.0","@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-+sB1hD/wO2GpWORw6Irf9eq/N9TILrjADR+6IMVaqh3Aag7JKRn8+UnG8kR2spi1GVCuKIzCTH6H293W8LB4Fw==","shasum":"6309b98d62955b9f4752b114972307dfbe67abf5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.69ba13b7.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I9sCRA9TVsSAnZWagAAXfYQAKEqScOoLS7wJ8ZxDjws\ngSaBTGzWx7VKpag3cERo7acmpy5O1B0tj8k1/OqJqsadUcHfgCE0skXM25Nl\n+hMN/bncnraZGidO7Ydvy0Cdu1/ZPSv62sN2GRjJP0i63l47zqWL7hgqV1jt\nUKBgJsqK6kcpTOfMWLc+6PCcC3lZLHtE+rD1TIA+XNOkxK1ScMr+sWY1krCp\nBlvfmWYfDu9779oXD0mqpwvQwJ8khMDOy2cyMMwoyiyPOkL3j8zrlEanYmxa\n+GrleE2F+azz9I9hUoITjLT7tEABdLi9KzzRnES//1o9LHxvwmiSJIYokonp\nhE4lv736DrvrVGRvq1dMXhqWQaBYCPW7sw2cfBHwe0Y5GrXWiDXQU3DNijH/\n7OO9ryROq164VZozeENQbYFqGYWLd7xyLmbVHmVN2QnK2uz44mkSsDkYKrPU\nwly0ma2zlBAUbmavYZvk2ROqzdc+nQmSx8J/AUTtqS0o6WK2ZRoK4EJMuHoH\nn2cINdA476un8VPsh9xAFt+wmDQKDJbGRq1exnecbsMJDPMqZAttF6N04jCf\n+vd86du+Xu6++vkAVfkd+qLPKsQc2ntlrLvU9+Rf1CUs1B0DTzuFT4XlNj68\nfjkFjebl5S8yzOymS4ohp2uSj4+lH92z7jCcw5sPCq0NPi5xDnNRpES6fnYj\nBwX0\r\n=InDp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIED781C96lQc4xJnEtN+mf5ZZk7bKSBKLYBRtOOnmS14AiEArbNZi2HJLom8D3DiPVjXp3uDJ4s2C0zQR8CVs5He99A="}]},"_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-top-app-bar_0.26.0-canary.69ba13b7.0_1642631020178_0.5849475583792016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0-canary.0af8ade5.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/top-app-bar":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.c14e977ee.0","@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-8eLw1HgYKUkS4mwtJTLjEpzI3VuNELNaSZWGlDS/Rrl7RFD6nuC7FJpm1PzTq1rVus16RLr8YGG/S0uJ07r16g==","shasum":"9f51b3e85f6bf2f11722a19ba899890fbd4fa433","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0-canary.0af8ade5.0.tgz","fileCount":16,"unpackedSize":61631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZeKCRA9TVsSAnZWagAAiaYP/0Tps02YKQ03I9+FyFqW\n66bgVrYnSalWwTLn6J+vnRYbefFGFo0GDdksKI4NQUYJtYUrPQCd4JDQm1Vz\nkmLEJjePEsTJjyxSrZHVch/rFxzZvNv9ZxIBFBQSd0jaGWIJFWggJxqKPxin\nXbR1i0OmBdDiz/Lped0ha6zNabdZZe/1ggKAXBhx4uEeIEZCP+xLw67PDxcP\nqSTU617GHm9aD3ggihs690RI8BMzry5mlrFQd8MGEU4Zv2GRkpK+qnze8PEC\nueG8BniFlRizJlCDZLr0mjnByjX0HDi1plMuLRiUKyJUbat8cTFyBVNDfHxu\nNPTMHfbYs3YLnbQzs6og3K+CT1EwoLmSRcr5BnL7ANXvZnVR5/PlfAcwqKbJ\nkf36sH3HVbmve0z33pfBN6FFJ9+SAKLF+nWkl3oRDwNKGqtKp/fWtfqqjynM\nntWXbDWo7p/OUeT5jXpdWBuyjRv9CUBDbPphphIVB5oFhG0wt22fqMcudSCJ\n7Rg8DpZVpdA34GmmnYgTCoy5ezp5/33Fsqw1pmVC7ByV+pzlRydfA5YYcUYL\nhkjwEaNOkfidP6xroMvfC21W0lVIkQ5jBvoIiQJVsYOGIprGEyX0wH0A3Q36\npjO5/4Jzk4ajmQFazWQA+M69eLE8k4QnepsFnjxi458GnbIpiUqR7lx29kJR\ntLXY\r\n=HWNC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmxD/Fuyp/DHA4T6e6HErv1Ulku/2c70Tzt+JT8LO9cAiAyn7tsxUv/hG1JoeO5wb3hfWkc9hXbuZdSFSABabIMng=="}]},"_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-top-app-bar_0.26.0-canary.0af8ade5.0_1644271497967_0.5458740371581967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-top-app-bar","version":"0.26.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.0","@material/top-app-bar":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0","@material/elevation":"=14.0.0","@material/theme":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-U5BZD1Kbyl6B01g39lPXqad/LrZ+33B4QHk/qGs6GQPTkW6hatWX8G3GosL4aaMOLE/r8iyH/Zl/pLwEppLe5A==","shasum":"a616f9d1ed675166572c21e614d1a5ee910fde9c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.0.tgz","fileCount":16,"unpackedSize":61496,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAU8K/DwMu16ZZzyQ6eRAU2jJRToywxTDz27pyq12DT4AiEAr/rFWgnPbkvdQlvA6a9HOjxW2FEPGIopywtFcOz44aA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4vA/9GPYjbuYzaQ5Kd5V5jMshinjbQAmUBacQNTBO7WbgJEBEyGi9\r\nVyGBNv9ErXWWwrissUffozgC3cJuAw6ng1o8UWtxdZjofnzNWcpK9pX6/XJK\r\nwgEdZ62b3p2U3anjBwKWo4mJyeZ7LWRR2BwZC3WnhLJr8aevXd5YSuQpaOUw\r\n7KGITIA+iR7uiU2tmxNWJlEk6HHE6821bZkTCG/E+/ofCS6jEougcfOiQJ+E\r\ntTh91XRgCoHhIqmaKlgYIOXZkzzPEROptvh6/sXAx+apHy7yO1PEXsP6e1fI\r\nMa8t9GNoIGHrhGZzrcDnfceP1aIn+XJA2SrF7BSloybSmXgZF527MfSCoG6c\r\neIt/zuV1adluGV9p6tDx71SnBdpPuPDYPaO9yB4u09mtsVWIHyT+wexoYRBf\r\nCCxd0L0Kr0ihVmn/Qcmvls2TNwgNgLJ8b8/Yn9TmEg87fiIReTvJwpD5mSV0\r\noQCPmG5KoEmhw4teaBMZanPhUwuXcmcQzR1guosROFT1iFKNt53UyHeS/sRg\r\nHzUhNKb3izUn2V2nVVTnos00343tVB5m58mr9c8Ua/d0CeHJ1LtB+S1hEJ80\r\nPZbO9uH4mPxxuVUtu80b56wb89HqVNjmjSOECzcNOY/b1tXaHwq4NLHxvsWm\r\nFcbUXscXVB4QGhyotNMrSbvnLjtc3i/bhr4=\r\n=qzE4\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-top-app-bar_0.26.0_1651599028790_0.8731690543589428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-top-app-bar","version":"0.26.1","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.1","@material/top-app-bar":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.53b3cad2f.0","@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-zAASmr8Dqf+4RyFGbaF4JvU5AYQn0yfeRuOcXlzcpUQlLgJqYp6plMLdPjVa+Ek3LBQGItQrGoDSX3y2mmkncw==","shasum":"c8912a539a7b88605fe2f21991223413fb2dce4d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.26.1.tgz","fileCount":16,"unpackedSize":61662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBAFrdk1zChy1I3VEmSVrTxi1JLeW74ATiK+6oXk/2ygAiEA6CZoNvZrZl+Jkqi5466RGg5WugCcudBu+LPAvG5OGZU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXoyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXiA//T9UoicahsFAc/+sSDIJu4gqxytq9YVzipKtVoXsYI3ov8H0y\r\nSoTy0/vxnR+Hr+xzOd9/KPIsuCv/+BqSrwJR7TSu7ff6FKqz23kU2I2tHAvK\r\nybmnPr2TOVokibKjAbh63dgwM1H1r3BL3ALzTRtCDp85WupqjauQMy1sv3Jj\r\nv1aPso/CUXeQKiRrcZd3fUXyawp7T7c0p6s1+T3TpM/MBKYSKWhA+NgMUqhK\r\nQCDYWQKitYFmvZ2eS2BTahl6GOX1ZZJ7u1iR8P1s3kUh05fv1Mwnz3x0etH/\r\nwXCQ9QWS+dxD2lzGyCUW+hbpBFKPoZA6lnaKtvoX5MpSR5nVxOHclrUMbMs5\r\nE9UJRTk6fSNac5YwOeNH/V+6l8b6X9g1YxFcfrPzEA9Vxy+rvFUs6nsSlyYE\r\nBxyddB6l8IjspfT1NaEyk4jhcxxEI0DBqp9KI2ZjWIK2T3u3WV9nK1xAuFa7\r\ntuhMIA1P/XRAS1xRxi/x1GdJhX6O7fGjlQ/kmBrkKssVlpVL9TpX0Q3wyWD1\r\nW7CYrImH9pLD40+6kjklmZnY9MDIp+2NaeJngFzgfmwP5D4BTxOnk/oqcGnG\r\n8srKvzYaIy0NNN9WTsa42Jv39mk+J5GqnHS1ByxXtHhL+dVdlC7O1c9vh7of\r\nvzm1v0z3pBTs8QLPjNFshdXHs5LNoo/Moow=\r\n=R5Tc\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-top-app-bar_0.26.1_1652128305904_0.4930425011550357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-top-app-bar","version":"0.27.0","description":"Material Design top app bar web component","keywords":["material design","web components","top app bar"],"main":"mwc-top-app-bar.js","module":"mwc-top-app-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.27.0","@material/top-app-bar":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.53b3cad2f.0","@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-top-app-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-vHn10exeDhUVFpo4TgBsS8pta4AxZtjuuxrYFHMYxceGifEATvGbYoPyw1x7cCMcXMMIITElgfCURAbCmn3BgA==","shasum":"1b712f041ee207801b20e72ebadad123ee8e879b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar/-/mwc-top-app-bar-0.27.0.tgz","fileCount":16,"unpackedSize":61662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7TH7Wdp/5y7U4GRrK2xCKFOM2zoulnpgm7/xuKl8u3QIgBysCist3KswF9p/NvhqW+koZW/66cV8NNQHl4B/LTq8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQiBAAkIS8E1dlAPraJ8oBri6Xz6DONu4/oVklCDSAOJ41G4gkYO2x\r\naiigq/mCiGGMGP+Cn+OtLfxZtDQCOYQyUd58zl/bsOZOfXicl8ozkCopdYBe\r\nQ93yqPeoqFiPE/KaX0JOBC2+CR7Wkrk5gjZBairt70dzsrpQJyRR//0M7v4q\r\nU+KAOKJTCZVdKaKEpomNfrWy1ztV9ICYzsOa1ZvbSdlKthZ1SmqHUYzOtQ8g\r\noFUI6r8q3DkmFOhGoQdsJzOEl9odj0+D+9ib+UKxaGrPoQgQL3+EOoX1ryKW\r\n23OfMhOB3SIX1cLfsdyRzg/uzjcDPU8umh/Hoi3Y0FmBtBVDSE8B2br3rQAs\r\nkrjqYY94dGEI10D/3mXdgkPWEBAj0p5F5bVSJKyANWkJxSEWZxUAUVHblbxY\r\nGiPs9X+btCuB6LAwN0EswA7BzebJvMegL/OCqf/P2FvhxWcoWpqKKUN7TkOo\r\n8H8Mh61/YQ4sYM6nmNtk6IUyBGzzIJH/OGmlFMnqOzydITNeQOplNhANos6m\r\nHNM0IUuELlCBxvKucxHbL/AkAbQrSepF/rmpvjYnvxmInfhVVAQMqey2AN+G\r\n0nfqHpNIMcGcNnYg4X54TOOatDRI6PHlj8ze28kOX+3VRnjjsRiTyp0/cLNa\r\ndpZNJ2PxDUE2tPP1lffKcjNmFyylrzXUTrQ=\r\n=ilii\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-top-app-bar_0.27.0_1660331520336_0.8889940974149695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2019-06-05T22:20:18.773Z","0.6.0":"2019-06-05T22:20:19.010Z","modified":"2024-04-04T19:00:26.209Z","0.7.0":"2019-08-27T21:23:45.237Z","0.7.1":"2019-08-28T02:54:23.502Z","0.8.0":"2019-09-04T00:04:43.917Z","0.9.0":"2019-09-27T01:36:15.399Z","0.9.1":"2019-09-30T21:05:00.079Z","0.10.0":"2019-10-11T23:28:18.861Z","0.11.0":"2019-11-26T21:49:27.347Z","0.11.1":"2019-11-27T00:26:30.183Z","0.12.0":"2019-12-17T23:47:54.115Z","0.13.0":"2020-02-04T04:46:36.489Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:16.174Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:04:52.292Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:21.558Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:43.776Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:05.911Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:39.016Z","0.14.0-canary.024f371a.0":"2020-03-03T01:28:52.908Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:49.421Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:44.781Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:11.707Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:35.612Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:24.947Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:11.178Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:12.439Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:13.943Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:32.682Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:44.908Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:17.487Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:34:55.217Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:28.708Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:45.349Z","0.14.0-canary.b3211481.0":"2020-03-11T20:23:56.254Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:51.153Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:07.620Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:20.243Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:43.479Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:52.074Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:38.262Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:20.317Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:14.405Z","0.14.0":"2020-03-19T21:28:36.096Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:53.106Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:05.796Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:46.471Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:27.358Z","0.14.1":"2020-03-23T17:57:32.636Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:45.439Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:33.322Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:06.135Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:29:54.399Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:22:59.679Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:21.924Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:16.828Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:24.619Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:11.917Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:44.020Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:42.633Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:39.117Z","0.15.0-canary.9b676354.0":"2020-04-03T20:29:55.816Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:08.840Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:38.092Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:49.957Z","0.15.0-canary.8d352305.0":"2020-04-07T21:41:56.827Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:23.373Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:28.225Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:37.258Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:28.293Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:05.627Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:47.578Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:31.595Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:39.595Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:13.470Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:40:57.806Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:56:58.022Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:24.162Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:13.341Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:08.373Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:15.339Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:14.200Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:02.955Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:22.531Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:13.125Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:37:50.744Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:13.371Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:35.159Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:54.389Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:39.957Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:49.353Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:09:55.630Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:40:57.512Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:42:54.436Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:11.173Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:08.456Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:37.181Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:44.198Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:41.759Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:38.886Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:17:56.687Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:10.759Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:25.404Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:11.106Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:41.477Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:44:59.755Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:46.380Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:28.450Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:00.223Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:34.080Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:28.578Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:48.862Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:31:55.511Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:03.525Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:39.990Z","0.15.0":"2020-05-05T22:36:04.003Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:22.779Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:37.499Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:12.927Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:27.959Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:38.256Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:29:57.707Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:34.225Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:04.860Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:44.568Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:12.407Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:36:52.857Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:10.631Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:18.742Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:34.288Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:07.531Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:18.141Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:24:42.050Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:44.823Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:28.919Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:33.991Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:26.669Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:47.369Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:10.832Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:18.079Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:38:30.393Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:08.896Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:46.677Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:20.169Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:11.730Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:28.793Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:42.328Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:38.798Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:01.039Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:14.202Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:08.985Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:08.339Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:25.476Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:14:54.789Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:32.477Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:04.954Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:33.692Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:42.611Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:25.561Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:42.497Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:02.728Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:33.407Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:44.149Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:20:56.437Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:19.759Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:34.413Z","0.16.0-canary.51552859.0":"2020-06-10T00:07:56.857Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:38.708Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:01.151Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:58:25.750Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:37.642Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:34.966Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:34.848Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:44.753Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:29.647Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:40.283Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:38.454Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:39.351Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:14:55.122Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:02.288Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:15.861Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:49.318Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:07.809Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:16.246Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:29:30.275Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:11.398Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:18.530Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:42.402Z","0.16.1":"2020-06-30T21:14:48.367Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:05.555Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:44:08.165Z","0.17.0":"2020-07-01T19:44:29.660Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:20.646Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:27.141Z","0.17.2":"2020-07-02T05:58:18.277Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:16.325Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:25.106Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:05.098Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:18.705Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:32.794Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:40.999Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:24.389Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:15.078Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:17.775Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:52:56.685Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:42.948Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:26.375Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:41:48.154Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:22.796Z","0.18.0-canary.44966b65.0":"2020-07-15T18:04:49.679Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:30.704Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:45:59.380Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:26.131Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:47.697Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:43:11.755Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:27.545Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:51.212Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:49.727Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:36.603Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:37.158Z","0.18.0-canary.346a622a.0":"2020-07-22T23:39:51.723Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:19.394Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:23.589Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:46.116Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:03.068Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:15.898Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:26.686Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:45.020Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:08.653Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:20.509Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:26.122Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:32.427Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:25.971Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:48.605Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:12.125Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:04.971Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:30.924Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:47.865Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:27.184Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:01.962Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:14.310Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:37.471Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:00:59.175Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:35.282Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:25.666Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:30.561Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:12.570Z","0.18.0":"2020-08-03T21:24:22.024Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:43.781Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:17:56.907Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:39.053Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:45:51.373Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:14.820Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:14.735Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:40.983Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:18.218Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:38.912Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:46.245Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:19.422Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:17.247Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:06:52.795Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:35.726Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:02.899Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:20.098Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:26.174Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:10.785Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:30.487Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:07:57.395Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:23.522Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:17.864Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:08:51.591Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:35.001Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:02.464Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:40.612Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:47.001Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:34:54.507Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:33:52.513Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:17.492Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:15:57.504Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:26.926Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:05.055Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:39.088Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:36:56.338Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:15.002Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:05.200Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:26:59.584Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:04.387Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:09.696Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:28.261Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:52:59.744Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:03.637Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:24.932Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:25.692Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:44.703Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:28.616Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:40:59.112Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:07.939Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:12.132Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:05.797Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:26.142Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:07.274Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:00.134Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:12.174Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:21.278Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:13.974Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:24.688Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:44.112Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:09.869Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:37:46.319Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:26.627Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:32.951Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:26.050Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:37.338Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:02.242Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:17.335Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:09.806Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:20.916Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:09.657Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:06.189Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:04.054Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:42.330Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:18.928Z","0.19.0-canary.af110e86.0":"2020-10-02T23:49:49.212Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:00.348Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:16.519Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:37.874Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:26.518Z","0.19.0":"2020-10-07T22:33:20.571Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:36.317Z","0.19.1":"2020-10-08T23:05:51.017Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:06:55.934Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:12.657Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:05.222Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:13.314Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:44.179Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:24.274Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:18.538Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:07.203Z","0.20.0-canary.65787913.0":"2020-10-19T18:50:53.213Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:09.854Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:43.617Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:20:55.318Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:03.122Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:36:52.301Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:29.232Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:29.871Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:35.104Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:43.344Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:36.844Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:05:46.876Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:57:53.243Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:23:58.023Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:41:56.412Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:37.995Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:20.803Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:23:47.531Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:25:44.661Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:39.682Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:03.341Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:33.945Z","0.20.0-canary.761027ff.0":"2020-11-18T22:13:56.647Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:46.576Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:30.219Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:04.912Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:31.557Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:02.103Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:14.535Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:07.543Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:03.797Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:43.439Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:17.967Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:01.535Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:08.797Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:37.069Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:25:47.494Z","0.20.0":"2020-12-03T22:28:46.673Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:46.023Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:03:45.132Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:53:51.388Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:38.747Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:39.297Z","0.21.0-canary.41f77000.0":"2020-12-18T00:34:59.451Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:34.594Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:32.546Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:23.643Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:08.237Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:07:57.225Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:03:56.800Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:21.114Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:54:50.897Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:03.158Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:06:46.382Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:24.511Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:10.717Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:04.658Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:19.041Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:24.432Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:11.520Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:08.950Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:42.024Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:16.564Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:28.504Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:30.331Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:24.366Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:24.510Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:18.463Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:21.292Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:41.392Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:44.051Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:06.868Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:22.061Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:39:56.339Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:08.517Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:19.103Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:16:59.552Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:31.131Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:29.691Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:17.990Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:36.264Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:33:55.832Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:09.944Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:29.019Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:50:55.414Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:44:36.299Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:28:49.680Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:42:56.156Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:14.125Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:41.744Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:17:56.101Z","0.21.0-canary.d84df029.0":"2021-02-16T19:07:50.171Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:19.743Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:47.339Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:37:53.688Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:08.618Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:06.238Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:14:49.706Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:06.321Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:00.219Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:18.886Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:34:27.038Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:47:16.881Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:10:51.298Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:30.097Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:03.843Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:00.220Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:25.472Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:28.174Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:22.284Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:01.462Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:12.042Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:00:49.621Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:35.707Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:08.932Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:23:13.357Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:33.949Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:15.352Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:44.485Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:39.808Z","0.21.0-canary.520290a9.0":"2021-03-11T22:27:51.116Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:10.730Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:14.561Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:42.282Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:27.907Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:38:55.550Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:28.519Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:10.701Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:19:55.319Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:52.460Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:09.872Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:45.674Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:23.513Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:14.757Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:32.446Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:08.325Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:16.659Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:00.691Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:03.997Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:16.351Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:49:54.678Z","0.21.0-canary.583644a6.0":"2021-04-05T17:50:59.705Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:15.844Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:33.018Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:23:43.804Z","0.21.0-canary.e539904c.0":"2021-04-08T18:01:55.621Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:20.602Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:30.438Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:24.126Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:04.296Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:43.889Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:10.149Z","0.21.0-canary.ff79b092.0":"2021-04-15T18:59:47.896Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:14.138Z","0.21.0-canary.11977cac.0":"2021-04-16T00:57:56.933Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:50:52.398Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:29.135Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:01.558Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:22.590Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:11.161Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:21.334Z","0.21.0":"2021-04-30T23:58:02.726Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:09.203Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:05.129Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:29.146Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:32.027Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:36:50.421Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:13.616Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:01.985Z","0.22.0-canary.25693d60.0":"2021-05-07T21:55:50.315Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:43.573Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:11.348Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:04.689Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:20.560Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:28.570Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:08.200Z","0.22.0-canary.4af17446.0":"2021-05-11T18:45:58.764Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:30.575Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:20.678Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:16.170Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:14.548Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:05.342Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:13.796Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:45.705Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:20.331Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:31:53.887Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:31.211Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:20.645Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:52.559Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:04.192Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:50:52.309Z","0.22.0-canary.b401a081.0":"2021-05-21T23:22:51.600Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:18.958Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:39.720Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:08.191Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:13.518Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:15.528Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:19.149Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:13:56.920Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:11:53.991Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:16.284Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:30:59.088Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:06.744Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:09.148Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:32:58.388Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:54:56.419Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:22.885Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:02.250Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:31.022Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:48:56.394Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:12.602Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:45.392Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:35.194Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:25.531Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:55:56.315Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:08:57.282Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:46:51.916Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:06.448Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:31.730Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:33:52.729Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:14.466Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:06.663Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:04.786Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:22.348Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:35.909Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:37.041Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:23.194Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:41:56.033Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:30.896Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:29.338Z","0.22.0":"2021-07-14T22:38:55.517Z","0.22.1":"2021-07-14T22:52:46.751Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:53:55.497Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:25.677Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:33.313Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:30.913Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:03:53.965Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:42.857Z","0.23.0-canary.c180db74.0":"2021-07-16T17:24:51.987Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:07.027Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:40.422Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:11:58.756Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:28.007Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:53:57.287Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:28.797Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:33.910Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:28.545Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:31.006Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:28.695Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:52:48.797Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:47.577Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:15:56.125Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:04.516Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:07.174Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:41.674Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:45.293Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:43:58.021Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:00.053Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:15.853Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:17.914Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:25:59.484Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:31:44.237Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:41.565Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:40.704Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:21.446Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:32.734Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:10:46.502Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:22.560Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:44.315Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:23.863Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:03:47.827Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:46:52.466Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:34.532Z","0.23.0-canary.3f47ae57.0":"2021-08-12T17:59:57.700Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:07.392Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:16:54.082Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:20.575Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:14.353Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:18.362Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:09.370Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:11.737Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:13.916Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:25.176Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:08.428Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:35.080Z","0.23.0-canary.6db58716.0":"2021-08-23T09:07:51.565Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:11.073Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:49:47.985Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:35.085Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:43:55.420Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:09.010Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:44:48.686Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:38.318Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:28:51.651Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:39.100Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:29.496Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:18:52.679Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:26.261Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:39.960Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:05.990Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:19.821Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:30.432Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:42.067Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:17.245Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:32:52.069Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:35.291Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:14.083Z","0.23.0":"2021-09-13T21:35:45.997Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:04.167Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:05.589Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:13.406Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:12.413Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:35:49.059Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:06.625Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:43.616Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:32.145Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:07.745Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:37.281Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:32.397Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:03.821Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:42.277Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:05.612Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:50.734Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:40.170Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:36.999Z","0.25.0":"2021-09-21T02:53:03.581Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:06.983Z","0.25.1":"2021-09-21T03:12:41.919Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:03.539Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:12.631Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:41.293Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:32.943Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:04.339Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:17.802Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:27.779Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:46.859Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:44.547Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:49.030Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:13.359Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:29.746Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:11.496Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:17.448Z","0.25.2":"2021-10-11T23:18:29.328Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:23.598Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:36:49.958Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:33.339Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:26.001Z","0.25.3":"2021-10-21T17:55:39.341Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:22.028Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:50.909Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:42.155Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:21.286Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:47.723Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:29.380Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:44:55.674Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:03:58.800Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:50.924Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:23.339Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:02.834Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:35:57.476Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:33.981Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:06:51.588Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:31.886Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:26:50.006Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:45.833Z","0.26.0-canary.893fc857.0":"2022-01-07T18:53:37.104Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:40.313Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:04:58.117Z","0.26.0":"2022-05-03T17:30:28.910Z","0.26.1":"2022-05-09T20:31:46.090Z","0.27.0":"2022-08-12T19:12:00.524Z"},"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 top app bar 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/top-app-bar"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTop App Bars are a container for items such as application title, navigation icon, and action items.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/top-app-bar/images/standard.gif)\n\nFor a fixed position version of this component, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar-fixed)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-web/demos/top-app-bar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------- | ------ | ---\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Global Custom Properties\n\n| Name | Description\n| ---- | -----------\n| `--mdc-theme-primary` | Background color of the bar\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","keywords":["material design","web components","top app bar"]}